/* =========================================================
   WMS PAGE
   Scoped CSS — does not modify shared site components
   ========================================================= */

.wms-page {
  --wms-teal-dark: #043f44;
  --wms-teal-mid: #064f54;
  --wms-teal: #075e63;
  --wms-accent: #00a9a5;
  --wms-pink: #f7255f;

  --wms-white: #ffffff;
  --wms-soft: #f3f8f7;
  --wms-text: #143638;
  --wms-muted: #637879;

  --wms-gradient:
    radial-gradient(
      circle at 12% 18%,
      rgba(0, 169, 165, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(247, 37, 95, 0.13),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #075e63 0%,
      #064f54 48%,
      #043f44 100%
    );

  color: var(--wms-text);
  overflow: hidden;
  background: #fff;
}

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

.wms-page h1,
.wms-page h2,
.wms-page h3 {
  font-family: "Poppins", sans-serif;
}

.wms-page p,
.wms-page a,
.wms-page span {
  font-family: "Inter", sans-serif;
}


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

.wms-section {
  position: relative;
  padding: 110px 0;
}

.wms-section-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--wms-accent);
}

.wms-section-label::before {
  content: "";

  width: 28px;
  height: 2px;

  border-radius: 10px;

  background: currentColor;
}

.wms-section-heading {
  max-width: 720px;
  margin-bottom: 55px;
}

.wms-section-heading h2 {
  margin: 0;

  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.wms-section-heading h2 span {
  color: var(--wms-accent);
}

.wms-section-heading p {
  max-width: 620px;
  margin: 20px 0 0;

  color: var(--wms-muted);

  font-size: 15px;
  line-height: 1.8;
}

.wms-light-heading h2 {
  color: #fff;
}

.wms-light-heading p {
  color: rgba(255,255,255,.68);
}

.wms-light-heading .wms-section-label {
  color: #8de6df;
}


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

.wms-hero {
  position: relative;
  min-height: 90vh;

  display: flex;
  align-items: center;

  color: #fff;

  background: var(--wms-gradient);

  overflow: hidden;
}

.wms-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4,63,68,.12),
      transparent 55%
    );

  pointer-events: none;
}

.wms-hero-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(4px);

  pointer-events: none;
}

.wms-orb-one {
  width: 400px;
  height: 400px;

  right: -180px;
  top: -150px;

  background: rgba(0,169,165,.13);

  animation: wmsOrbMove 9s ease-in-out infinite;
}

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

  left: -160px;
  bottom: -160px;

  background: rgba(247,37,95,.08);

  animation: wmsOrbMove 11s ease-in-out infinite reverse;
}

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

.wms-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;

  margin-bottom: 28px;

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

  font-size: 12px;
}

.wms-breadcrumb a {
  color: rgba(255,255,255,.62);

  transition: color .25s ease;
}

.wms-breadcrumb a:hover {
  color: #fff;
}

.wms-breadcrumb i {
  font-size: 9px;
  opacity: .45;
}

.wms-eyebrow {
  margin-bottom: 18px;

  color: #8de6df;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.wms-hero h1 {
  max-width: 780px;

  margin: 0;

  font-size: clamp(46px, 6vw, 76px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.055em;
}

.wms-hero h1 span {
  display: block;
  color: #8de6df;
}

.wms-hero-copy {
  max-width: 650px;

  margin: 28px 0 0;

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

  font-size: 16px;
  line-height: 1.8;
}

.wms-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;

  margin-top: 36px;
}

.wms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-height: 52px;

  padding: 0 23px;

  border-radius: 50px;

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

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

.wms-btn:hover {
  transform: translateY(-3px);
}

.wms-btn i {
  transition: transform .3s ease;
}

.wms-btn:hover i {
  transform: translate(3px,-3px);
}

.wms-btn-light {
  background: #fff;
  color: var(--wms-teal-dark);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.wms-btn-light:hover {
  color: var(--wms-teal-dark);
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

.wms-link-light {
  display: inline-flex;
  align-items: center;
  gap: 9px;

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

  font-size: 13px;
  font-weight: 600;

  transition: color .3s ease;
}

.wms-link-light:hover {
  color: #fff;
}


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

.wms-hero-system {
  position: relative;

  width: min(450px, 100%);
  aspect-ratio: 1;

  margin: auto;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0,169,165,.12),
      transparent 60%
    );

  animation: wmsSystemFloat 7s ease-in-out infinite;
}

.wms-system-ring {
  position: absolute;

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

  border-radius: 50%;
}

.ring-one {
  inset: 8%;
}

.ring-two {
  inset: 22%;

  border-color: rgba(141,230,223,.17);
}

.wms-system-center {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 145px;
  height: 145px;

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

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

  border-radius: 50%;

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

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

  box-shadow:
    0 20px 50px rgba(0,0,0,.15),
    inset 0 0 25px rgba(255,255,255,.04);

  backdrop-filter: blur(14px);
}

.wms-center-icon {
  width: 40px;
  height: 40px;

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

  margin-bottom: 8px;

  border-radius: 12px;

  color: #8de6df;
  background: rgba(0,169,165,.12);

  font-size: 20px;
}

.wms-system-center strong {
  font-size: 15px;
}

.wms-system-center small {
  margin-top: 3px;

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

  font-size: 9px;
}

.wms-system-node {
  position: absolute;

  width: 82px;
  height: 82px;

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

  border-radius: 50%;

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

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

  backdrop-filter: blur(10px);

  animation: wmsNodeFloat 4s ease-in-out infinite;
}

.wms-system-node i {
  margin-bottom: 5px;

  color: #8de6df;

  font-size: 20px;
}

.wms-system-node span {
  color: rgba(255,255,255,.75);

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

.node-top {
  top: 2%;
  left: 50%;

  transform: translateX(-50%);
}

.node-right {
  top: 50%;
  right: 2%;

  transform: translateY(-50%);

  animation-delay: .8s;
}

.node-bottom {
  bottom: 2%;
  left: 50%;

  transform: translateX(-50%);

  animation-delay: 1.6s;
}

.node-left {
  top: 50%;
  left: 2%;

  transform: translateY(-50%);

  animation-delay: 2.4s;
}

.wms-pulse {
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #8de6df;

  animation: wmsPulse 2.2s infinite;
}

.pulse-one {
  left: 25%;
  top: 28%;
}

.pulse-two {
  right: 27%;
  top: 25%;

  animation-delay: .7s;
}

.pulse-three {
  right: 24%;
  bottom: 26%;

  animation-delay: 1.4s;
}


/* =========================================================
   INTRO
   ========================================================= */

.wms-intro {
  background: #fff;
}

.wms-intro-grid {
  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 90px;

  align-items: center;
}

.wms-intro-heading h2 {
  margin: 0;

  font-size: clamp(34px,4vw,50px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.wms-intro-heading h2 span {
  display: block;
  color: var(--wms-accent);
}

.wms-intro-content {
  padding-left: 35px;

  border-left: 1px solid rgba(4,63,68,.12);
}

.wms-intro-content p {
  margin: 0 0 20px;

  color: var(--wms-muted);

  font-size: 15px;
  line-height: 1.85;
}

.wms-intro-content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   FLOW
   ========================================================= */

.wms-flow-section {
  position: relative;

  color: #fff;

  background: var(--wms-gradient);

  overflow: hidden;
}

.wms-flow-bg {
  position: absolute;

  width: 600px;
  height: 600px;

  right: -280px;
  top: -250px;

  border-radius: 50%;

  background: rgba(0,169,165,.08);

  filter: blur(15px);
}

.wms-flow-section .container {
  position: relative;
  z-index: 2;
}

.wms-flow-track {
  position: relative;

  display: grid;

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

  gap: 25px;
}

.wms-flow-track::before {
  content: "";

  position: absolute;

  left: 9%;
  right: 9%;
  top: 45px;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(141,230,223,.45),
    transparent
  );
}

.wms-flow-card {
  position: relative;
  z-index: 2;

  text-align: center;
}

.wms-flow-icon {
  position: relative;

  width: 90px;
  height: 90px;

  margin: 0 auto 22px;

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

  border-radius: 50%;

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

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

  color: #8de6df;

  font-size: 24px;

  backdrop-filter: blur(10px);

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

.wms-flow-card:hover .wms-flow-icon {
  transform: translateY(-8px) scale(1.05);

  background: rgba(255,255,255,.14);
}

.wms-flow-card > span {
  display: block;

  margin-bottom: 7px;

  color: rgba(141,230,223,.65);

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

.wms-flow-card h3 {
  margin: 0 0 8px;

  color: #fff;

  font-size: 18px;
  font-weight: 600;
}

.wms-flow-card p {
  max-width: 230px;

  margin: auto;

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

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


/* =========================================================
   FEATURES
   ========================================================= */

.wms-features {
  background: var(--wms-soft);
}

.wms-feature-card {
  position: relative;

  height: 100%;
  min-height: 255px;

  padding: 30px;

  border-radius: 24px;

  background: #fff;

  border: 1px solid rgba(4,63,68,.07);

  overflow: hidden;

  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

.wms-feature-card::before {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  right: -90px;
  bottom: -90px;

  border-radius: 50%;

  background: rgba(0,169,165,.08);

  transition: transform .45s ease;
}

.wms-feature-card:hover {
  transform: translateY(-8px);

  border-color: rgba(0,169,165,.18);

  box-shadow:
    0 25px 55px rgba(4,63,68,.10);
}

.wms-feature-card:hover::before {
  transform: scale(1.5);
}

.wms-feature-icon {
  width: 52px;
  height: 52px;

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

  margin-bottom: 25px;

  border-radius: 15px;

  background: var(--wms-gradient);

  color: #fff;

  font-size: 20px;
}

.wms-feature-card h3 {
  position: relative;

  margin: 0 0 10px;

  font-size: 18px;
  font-weight: 600;
}

.wms-feature-card p {
  position: relative;

  max-width: 300px;

  margin: 0;

  color: var(--wms-muted);

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

.wms-card-arrow {
  position: absolute;

  right: 27px;
  top: 30px;

  width: 34px;
  height: 34px;

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

  border-radius: 50%;

  color: var(--wms-teal);

  background: rgba(0,169,165,.08);

  font-size: 13px;

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

.wms-feature-card:hover .wms-card-arrow {
  transform: translate(3px,-3px);

  background: rgba(0,169,165,.14);
}


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

.wms-why {
  background: #fff;
}

.wms-why-grid {
  display: grid;

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

  gap: 90px;

  align-items: start;
}

.wms-why-content {
  position: sticky;
  top: 120px;
}

.wms-why-content h2 {
  margin: 0;

  font-size: clamp(34px,4vw,50px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.wms-why-content h2 span {
  display: block;
  color: var(--wms-accent);
}

.wms-why-content > p {
  max-width: 450px;

  margin: 22px 0 0;

  color: var(--wms-muted);

  font-size: 15px;
  line-height: 1.8;
}

.wms-benefits {
  display: grid;

  gap: 15px;
}

.wms-benefit {
  display: grid;

  grid-template-columns: 55px 1fr;

  gap: 20px;

  padding: 23px;

  border-radius: 20px;

  background: var(--wms-soft);

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

.wms-benefit:hover {
  transform: translateX(7px);

  background: #e8f2f1;
}

.wms-benefit-icon {
  width: 52px;
  height: 52px;

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

  border-radius: 15px;

  background: #fff;

  color: var(--wms-accent);

  font-size: 20px;

  box-shadow: 0 8px 22px rgba(4,63,68,.06);
}

.wms-benefit h3 {
  margin: 3px 0 7px;

  font-size: 17px;
  font-weight: 600;
}

.wms-benefit p {
  margin: 0;

  color: var(--wms-muted);

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


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

.wms-cta-section {
  padding: 100px 0;

  background: var(--wms-soft);
}

.wms-cta {
  position: relative;

  padding: 70px;

  border-radius: 32px;

  overflow: hidden;

  color: #fff;

  background: var(--wms-gradient);

  box-shadow:
    0 25px 65px rgba(4,63,68,.16);
}

.wms-cta::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -180px;
  top: -220px;

  border-radius: 50%;

  background: rgba(0,169,165,.12);
}

.wms-cta::after {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -120px;
  bottom: -170px;

  border-radius: 50%;

  background: rgba(247,37,95,.09);
}

.wms-cta-content {
  position: relative;
  z-index: 2;

  max-width: 720px;
}

.wms-cta .wms-section-label {
  color: #8de6df;
}

.wms-cta h2 {
  margin: 0;

  font-size: clamp(35px,4.5vw,55px);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.wms-cta p {
  max-width: 600px;

  margin: 20px 0 30px;

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

  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes wmsSystemFloat {
  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes wmsNodeFloat {
  0%,100% {
    margin-top: 0;
  }

  50% {
    margin-top: -7px;
  }
}

@keyframes wmsPulse {

  0% {
    opacity: .9;

    box-shadow:
      0 0 0 0 rgba(141,230,223,.45);
  }

  70% {
    opacity: .4;

    box-shadow:
      0 0 0 15px rgba(141,230,223,0);
  }

  100% {
    opacity: .9;

    box-shadow:
      0 0 0 0 rgba(141,230,223,0);
  }
}

@keyframes wmsOrbMove {

  0%,100% {
    transform: translate(0,0);
  }

  50% {
    transform: translate(20px,15px);
  }
}


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

@media (max-width: 991px) {

  .wms-section {
    padding: 85px 0;
  }

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

  .wms-hero .container {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .wms-hero-system {
    width: 390px;
    max-width: 100%;

    margin-top: 30px;
  }

  .wms-intro-grid,
  .wms-why-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .wms-why-content {
    position: static;
  }

  .wms-intro-content {
    padding-left: 25px;
  }

  .wms-flow-track {
    grid-template-columns: repeat(2,1fr);

    row-gap: 50px;
  }

  .wms-flow-track::before {
    display: none;
  }

  .wms-cta {
    padding: 55px;
  }
}


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

@media (max-width: 767px) {

  .wms-section {
    padding: 70px 0;
  }

  .wms-hero .container {
    padding-top: 70px;
    padding-bottom: 65px;
  }

  .wms-breadcrumb {
    font-size: 10px;
    line-height: 1.6;
  }

  .wms-hero h1 {
    font-size: clamp(40px,11vw,55px);
  }

  .wms-hero-copy {
    font-size: 14px;
  }

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

  .wms-btn {
    width: 100%;
  }

  .wms-hero-system {
    width: 320px;
  }

  .wms-system-center {
    width: 110px;
    height: 110px;
  }

  .wms-system-node {
    width: 66px;
    height: 66px;
  }

  .wms-system-node i {
    font-size: 17px;
  }

  .wms-system-node span {
    font-size: 8px;
  }

  .wms-section-heading {
    margin-bottom: 38px;
  }

  .wms-intro-content {
    padding-left: 20px;
  }

  .wms-flow-track {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .wms-feature-card {
    min-height: 230px;
  }

  .wms-benefit {
    grid-template-columns: 48px 1fr;

    gap: 15px;
  }

  .wms-benefit-icon {
    width: 46px;
    height: 46px;
  }

  .wms-cta-section {
    padding: 70px 0;
  }

  .wms-cta {
    padding: 40px 25px;

    border-radius: 25px;
  }

}


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

@media (max-width: 420px) {

  .wms-hero h1 {
    font-size: 39px;
  }

  .wms-hero-system {
    width: 285px;
  }

  .wms-system-center {
    width: 92px;
    height: 92px;
  }

  .wms-center-icon {
    width: 32px;
    height: 32px;

    font-size: 16px;
  }

  .wms-system-node {
    width: 58px;
    height: 58px;
  }

  .wms-system-node i {
    font-size: 15px;
  }

  .wms-system-node span {
    font-size: 7px;
  }

}


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

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

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

}