/* HERO
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.home-hero {
   position: relative;
   overflow: hidden;
   padding-bottom: var(--header-wave-height);
   background:
      radial-gradient(circle at 90% 10%, rgba(var(--clr-accent-rgb), .5), transparent 65%),
      radial-gradient(circle at 0 100%, rgba(var(--clr-hero-green-rgb), .35), transparent 55%),
      linear-gradient(110deg, var(--clr-primary-light), var(--clr-white) 85%);
}

.hero-row {
   min-height: 44rem;
   padding-top: var(--space-xxl);
   padding-bottom: var(--space-xl);
}

.hero-content { position: relative; z-index: 2; }

.hero-label-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-md) var(--space-xl);
   margin-bottom: var(--space-xl);
}

.hero-patent {
   display: block;
   width: auto;
   height: 3rem;
   object-fit: contain;
}

.hero-content h2 { margin-bottom: var(--space-lg); --hero-delay: .12s; }

.hero-description {
   max-width: 36rem;
   margin-bottom: var(--space-xl);
   font-size: 1.125rem;
}

.hero-visual {
   position: relative;
   width: 100%;
   max-width: 36rem;
   margin-inline: auto;
   padding: var(--space-lg);
}

.hero-photo {
   aspect-ratio: 1;
   background: var(--clr-primary-light);
   border: var(--space-sm) solid var(--clr-white);
   border-radius: var(--site-image-shape);
   box-shadow: 0 var(--space-lg) var(--space-xxl) rgba(var(--clr-primary-rgb), .12);
}

@media (max-width: 991.98px) {
   .hero-row { min-height: auto; padding-block: var(--space-xxl); }
   .hero-content { text-align: center; }
   .hero-label-row, .hero-actions { justify-content: center; }
   .hero-description { margin-inline: auto; }
   .hero-visual { max-width: 32rem; }
}

@media (max-width: 575.98px) {
   .hero-row { padding-top: var(--space-xxl); padding-bottom: var(--space-xl); }
   .hero-label-row { gap: var(--space-md); margin-bottom: var(--space-lg); }
   .hero-patent { height: 2rem; }
   .hero-description { font-size: 1rem; }
   .hero-visual { max-width: 24rem; padding: var(--space-md); }
}


/* HERO FLOATING CARDS */

.hero-float-position {
   position: absolute;
   z-index: 3;
   max-width: 20rem;
}

.hero-float-position-1 { top: 12%; right: 0; }
.hero-float-position-2 { bottom: 12%; left: 0; }

.hero-float-card {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

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

.hero-card-copy strong {
   display: block;
   color: var(--clr-primary-dark);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.4;
}

.hero-card-copy span {
   display: block;
   margin-top: var(--space-xs);
   font-size: .875rem;
   line-height: 1.5;
}

@media (max-width: 575.98px) {
   .hero-float-position { max-width: 16rem; }
   .hero-float-card { gap: var(--space-sm); }
   .hero-card-copy strong { font-size: .875rem; }
   .hero-card-copy span { font-size: .75rem; }
}

/* HERO CONTROLS */

.hero-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-md);
   padding-bottom: var(--space-xl);
}

.hero-control {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 3rem;
   height: 3rem;
   padding: 0;
   color: var(--clr-primary-dark);
   background: var(--clr-white);
   border: 1px solid var(--clr-border);
   border-radius: 50%;
   cursor: pointer;
   transition: var(--transition);
}

.hero-control:hover { background: var(--clr-primary-light); }
.hero-control:disabled { opacity: .5; cursor: not-allowed; }
.hero-pagination.swiper-pagination-bullets { width: auto; }
.hero-pagination .swiper-pagination-bullet { background: var(--clr-primary-dark); }
.hero-pagination .swiper-pagination-bullet-active { opacity: 1; }

/* HERO ENTRANCES */

.hero-swiper.swiper-initialized .hero-reveal { opacity: 0; }

.hero-swiper.swiper-initialized .swiper-slide-active .hero-reveal {
   animation: hero-enter .7s ease both;
   animation-delay: var(--hero-delay, 0s);
}

.hero-description { --hero-delay: .24s; }
.hero-actions { --hero-delay: .36s; }
.hero-photo { --hero-delay: .48s; }
.hero-float-position-1 { --hero-delay: .6s; }
.hero-float-position-2 { --hero-delay: .72s; }

@keyframes hero-enter {
   from { opacity: 0; transform: translateY(var(--space-lg)); }
   to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
   .hero-swiper.swiper-initialized .hero-reveal { opacity: 1; }
   .hero-swiper.swiper-initialized .swiper-slide-active .hero-reveal { animation: none; }
   .hero-control { transition: none; }
}


/* GSYS ECOSYSTEM
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.ecosystem-partners {
   position: relative;
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   gap: var(--space-lg);
   height: 100%;
}

.ecosystem-partner {
   position: relative;
   min-width: 0;
   padding-left: var(--space-3xl);
}

.ecosystem-node {
   position: absolute;
   z-index: 2;
   top: var(--space-xl);
   left: 0;
   border: 2px solid var(--clr-white);
}

/* Connection runs between the centres of the first and last icons. */

.ecosystem-flow {
   position: absolute;
   z-index: 1;
   top: calc(var(--space-xl) + 1.5rem);
   left: 0;
   width: 3rem;
   height: calc((200% + var(--space-lg) + var(--space-lg)) / 3);
   pointer-events: none;
}

.ecosystem-flow::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 2px;
   background: linear-gradient(180deg, var(--clr-secondary-dark), var(--clr-primary-accent), var(--clr-secondary-dark));
   transform: translateX(-50%);
}

.ecosystem-arrow {
   position: absolute;
   top: 50%;
   left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--space-xl);
   height: var(--space-xl);
   color: var(--clr-primary-dark);
   background: var(--clr-white);
   border-radius: 50%;
   opacity: 0;
   transform: translate(-50%, -50%);
}

.ecosystem-arrow i { font-size: 1.25rem; }
.ecosystem-arrow-up i { transform: rotate(-90deg); }
.ecosystem-arrow-down i { transform: rotate(90deg); }
.ecosystem-arrow-up { animation: ecosystem-arrow-up 3s linear infinite; }
.ecosystem-arrow-down { animation: ecosystem-arrow-down 3s linear infinite; }

@keyframes ecosystem-arrow-up {
   0% { top: 50%; opacity: 0; }
   12%, 80% { opacity: 1; }
   100% { top: 0; opacity: 0; }
}

@keyframes ecosystem-arrow-down {
   0% { top: 50%; opacity: 0; }
   12%, 80% { opacity: 1; }
   100% { top: 100%; opacity: 0; }
}

@media (max-width: 575.98px) {
   .ecosystem-partner { padding-left: var(--space-xxl); }
   .ecosystem-node, .ecosystem-flow { left: calc(-1 * var(--space-sm)); }
}

@media (prefers-reduced-motion: reduce) {
   .ecosystem-arrow { display: none; animation: none; }
}


/* MANUAL TO DIGITAL
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.home-comparison { background: var(--clr-white); }

.comparison-before, .comparison-gsys {
   position: relative;
   isolation: isolate;
   overflow: hidden;
}

.comparison-before {
   border-style: dashed;
   border-color: var(--clr-muted);
   box-shadow: none;
}

.comparison-before h3, .comparison-before .site-icon { color: var(--clr-muted); }
.comparison-gsys { background-image: radial-gradient(circle at 100% 0, rgba(var(--clr-accent-rgb), .25), transparent 60%); }
.home-comparison h3 { margin-bottom: var(--space-lg); }

.comparison-card-image {
   position: absolute;
   z-index: -1;
   right: calc(-1 * var(--space-md));
   bottom: calc(-1 * var(--space-md));
   width: 60%;
   height: 65%;
   object-fit: contain;
   object-position: right bottom;
   opacity: .12;
   pointer-events: none;
}

.comparison-gsys .comparison-card-image { opacity: .16; }

.comparison-items {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   margin: 0;
   padding: 0;
   list-style: none;
}

.comparison-items li {
   display: flex;
   align-items: flex-start;
   gap: var(--space-md);
   margin: 0;
}

.comparison-items li > span:last-child { padding-top: var(--space-xs); }

.comparison-gsys .comparison-items {
   gap: var(--space-lg);
   color: var(--clr-white);
   font-weight: 600;
}

.comparison-summary {
   margin-top: var(--space-xl);
   color: var(--clr-primary-dark);
   font-size: 1.125rem;
   font-weight: 600;
}

@media (max-width: 575.98px) {
   .comparison-gsys .comparison-items { gap: var(--space-md); }
   .comparison-summary { font-size: 1rem; }
}


/* SOLUTIONS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* DECORATED SECTIONS */

.site-section-decorated {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-white) 55%, var(--clr-secondary-light));
}

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

/* TABLET VISUALS & CONTENT */

.solution-visual { min-height: 430px; }

.solution-tablet {
   display: block;
   width: 100%;
   max-height: 520px;
   object-fit: contain;
   filter: drop-shadow(0 20px 20px rgba(var(--clr-primary-rgb), .12));
}

#companySolution .section-label { color: var(--clr-secondary-dark); }

@media (max-width: 991.98px) {
   .solution-visual { min-height: 0; }
   .solution-tablet { max-width: 650px; }
   .solution-content { max-width: 650px; margin-inline: auto; }
}


/* CONNECTED WORKFLOW
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.home-workflow {
   --workflow-cycle: 10s;
   --workflow-node-size: 5rem;
   --workflow-highlight: var(--clr-primary-light);
   background-image:
      radial-gradient(circle at 10% 15%, rgba(var(--clr-accent-rgb), .2), transparent 40%),
      radial-gradient(circle at 95% 90%, rgba(var(--clr-secondary-rgb), .18), transparent 35%);
}

.workflow-journey { position: relative; }
.workflow-steps { position: relative; }

.workflow-steps::before {
   content: '';
   position: absolute;
   top: calc(var(--workflow-node-size) / 2);
   left: 10%;
   right: 10%;
   height: 2px;
   background: repeating-linear-gradient(90deg, rgba(var(--clr-white-rgb), .35) 0 8px, transparent 8px 16px);
}

.workflow-step { position: relative; z-index: 2; text-align: center; }

.workflow-node {
   position: relative;
   z-index: 2;
   width: var(--workflow-node-size);
   height: var(--workflow-node-size);
   margin-bottom: var(--space-lg);
   color: var(--workflow-highlight);
   background: var(--clr-primary-dark);
   border: 1px solid rgba(var(--clr-white-rgb), .35);
   box-shadow: 0 0 0 var(--space-sm) rgba(var(--clr-white-rgb), .03);
   font-size: 1.75rem;
   transition: var(--transition);
}

.workflow-copy h3 { color: var(--clr-white); }

.workflow-bottom {
   margin-top: var(--space-xxl);
   padding-top: var(--space-xl);
   border-top: 1px solid rgba(var(--clr-white-rgb), .15);
}

.workflow-bottom p { color: var(--clr-white); }

/* TRAVELLING DOT & NODE HIGHLIGHTS */

.workflow-traveller {
   position: absolute;
   z-index: 1;
   top: calc(var(--workflow-node-size) / 2);
   left: 10%;
   width: .75rem;
   height: .75rem;
   background: var(--workflow-highlight);
   border: 2px solid var(--clr-white);
   border-radius: 50%;
   box-shadow: 0 0 0 var(--space-xs) rgba(var(--clr-accent-rgb), .2), 0 0 1rem rgba(var(--clr-accent-rgb), .6);
   transform: translate(-50%, -50%);
   pointer-events: none;
   animation: workflow-travel var(--workflow-cycle) linear infinite;
}

@keyframes workflow-travel {
   0%, 8% { left: 10%; opacity: 1; }
   20%, 28% { left: 30%; opacity: 1; }
   40%, 48% { left: 50%; opacity: 1; }
   60%, 68% { left: 70%; opacity: 1; }
   80%, 88% { left: 90%; opacity: 1; }
   94%, 100% { left: 90%; opacity: 0; }
}

@keyframes workflow-node-highlight {
   0%, 8%, 100% {
      color: var(--clr-primary-dark);
      background: var(--workflow-highlight);
      border-color: var(--workflow-highlight);
      box-shadow: 0 0 0 var(--space-md) rgba(var(--clr-accent-rgb), .12);
   }
   12%, 96% {
      color: var(--workflow-highlight);
      background: var(--clr-primary-dark);
      border-color: rgba(var(--clr-white-rgb), .35);
      box-shadow: 0 0 0 var(--space-sm) rgba(var(--clr-white-rgb), .03);
   }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
   .workflow-node { animation: workflow-node-highlight var(--workflow-cycle) linear infinite; }
   .workflow-step:nth-child(2) .workflow-node { animation-delay: -8s; }
   .workflow-step:nth-child(3) .workflow-node { animation-delay: -6s; }
   .workflow-step:nth-child(4) .workflow-node { animation-delay: -4s; }
   .workflow-step:nth-child(5) .workflow-node { animation-delay: -2s; }
}

/* VERTICAL JOURNEY */

@media (max-width: 991.98px) {
   .workflow-journey { max-width: 40rem; margin-inline: auto; }
   .workflow-steps { row-gap: var(--space-xl); }
   .workflow-steps::before, .workflow-traveller { display: none; }

   .workflow-step {
      display: flex;
      align-items: flex-start;
      gap: var(--space-lg);
      text-align: left;
   }

   .workflow-step:not(:last-child)::before {
      content: '';
      position: absolute;
      top: calc(var(--workflow-node-size) / 2);
      bottom: calc(-1 * var(--space-xl));
      left: calc(var(--workflow-node-size) / 2);
      width: 2px;
      background: rgba(var(--clr-white-rgb), .25);
      transform: translateX(-50%);
   }

   .workflow-node { margin-bottom: 0; }
   .workflow-copy { padding-top: var(--space-sm); }
}

@media (max-width: 575.98px) {
   .home-workflow { --workflow-node-size: 3.75rem; }
   .workflow-step { gap: var(--space-md); }
   .workflow-node { font-size: 1.375rem; }
   .workflow-copy { padding-top: var(--space-xs); }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
   .workflow-traveller { display: none; animation: none; }
   .workflow-node { animation: none; transition: none; }
}


/* CALL TO ACTION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.home-cta {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: var(--clr-white);
}

/* IMAGE FEATURES */

.cta-feature { max-width: 24rem; margin-inline: auto; }

.cta-feature-image {
   margin-right: var(--space-lg);
   aspect-ratio: 3 / 4;
   border-radius: var(--radius-lg);
}

.cta-feature-caption {
   position: relative;
   margin: calc(-1 * var(--space-3xl)) 0 0 var(--space-xxl);
}

.cta-feature-label {
   display: block;
   margin-bottom: var(--space-sm);
   color: var(--clr-primary-accent);
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.cta-feature-caption h3 { margin-bottom: var(--space-sm); }
.cta-feature-caption p { font-size: .875rem; }

@media (max-width: 575.98px) {
   .cta-feature-caption { margin-left: var(--space-lg); }
}

/* BACKGROUND DECORATIONS */

.cta-decoration {
   position: absolute;
   z-index: -1;
   inset: 0;
   pointer-events: none;
}

.cta-decoration > span {
   position: absolute;
   border-radius: 50%;
   animation: cta-drift 7s ease-in-out infinite alternate;
}

.cta-circle-blue {
   top: -100px;
   left: -80px;
   width: 320px;
   height: 320px;
   border: 2px solid rgba(var(--clr-accent-rgb), .15);
}

.cta-decoration .cta-circle-green {
   right: -70px;
   bottom: -130px;
   width: 360px;
   height: 360px;
   border: 2px solid rgba(var(--clr-secondary-rgb), .2);
   animation-duration: 9s;
   animation-delay: -4s;
}

.cta-decoration .cta-dot {
   top: 25%;
   right: 12%;
   width: 18px;
   height: 18px;
   background: rgba(var(--clr-accent-rgb), .25);
   animation-duration: 5s;
   animation-delay: -2s;
}

@keyframes cta-drift {
   from { transform: translate(0, 0); }
   to { transform: translate(15px, -20px); }
}

@media (max-width: 575.98px) {
   .cta-circle-blue { width: 220px; height: 220px; }
   .cta-decoration .cta-circle-green { width: 260px; height: 260px; }
}

/* ACTIONS */

.cta-actions { margin-top: var(--space-xxl); }
.cta-contact { font-family: var(--font-heading); }
.cta-contact i { transition: transform .25s ease; }
.cta-contact:hover i { transform: translateX(var(--space-xs)); }

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
   .cta-decoration > span { animation: none; }
   .cta-contact i { transition: none; }
   .cta-contact:hover i { transform: none; }
}