/* V28 complete homepage, ported from the approved local prototype. */
body.home .ms-header,
body.home .ms-site-bg,
body.home .ms-page-haze {
  display: none !important;
}

body.home .ms-main {
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden;
  background: #e8ecf6;
}

body.home .ms-c-home__backdrop,
body.home .ms-c-home > .ms-v28-hero,
body.home .ms-c-home__hero--legacy {
  display: none !important;
}

body.home .ms-c-home {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding-top: 0 !important;
  background: #e8ecf6;
}

body.home .ms-c-home__light {
  margin-top: 0 !important;
  padding-top: clamp(2rem, 3vw, 3rem) !important;
  background:
    radial-gradient(ellipse at 24% 0%, rgba(102, 223, 22, .10), transparent 34rem),
    radial-gradient(ellipse at 74% 0%, rgba(18, 184, 255, .13), transparent 38rem),
    linear-gradient(180deg, #e8ecf6 0%, #edf4ff 48%, #ffffff 100%) !important;
}

@media (min-width: 761px) {
  body.home .ms-c-home {
    z-index: 20;
    margin-top: -84px;
  }

  body.home .ms-c-home__light {
    padding-top: clamp(1.5rem, 2vw, 2.25rem) !important;
  }
}

@media (min-width: 761px) {
  body.home .ms-c-home::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -82px;
    height: 170px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(232, 236, 246, 0) 0%, rgba(232, 236, 246, .78) 44%, rgba(232, 236, 246, 0) 100%);
  }
}

@font-face {
      font-family: "Ethnocentric";
      src: url("fonts/ethnocentric/ethnocentric-rg.woff") format("woff");
      font-display: swap;
      font-style: normal;
      font-weight: 400;
    }

    .ms-v28-page {
      --ink: #05163f;
      --ink-soft: #1c315b;
      --muted: #63779a;
      --blue: #1559c7;
      --blue-electric: #13b8ff;
      --green: #66df16;
      --green-deep: #2fc331;
      --paper: #fafdff;
      --video-top-left: #eceff8;
      --video-top-right: #c4d2ec;
      --video-left-mid: #e8ecf6;
      --video-right-mid: #c2d2eb;
      --video-bottom: #cfdbf1;
      --video-paper: #e8ecf6;
      --video-paper-soft: #f6fbff;
      --glass: rgba(255, 255, 255, .72);
      --stroke: rgba(21, 89, 199, .12);
      --shadow: 0 28px 80px rgba(14, 75, 168, .12);
      --mx: 72%;
      --my: 48%;
    }

    @property --border-angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }

    .ms-v28-page * {
      box-sizing: border-box;
    }

    .ms-v28-page {
      color: var(--ink);
      background: var(--video-paper);
      scroll-behavior: smooth;
    }

    .ms-v28-page {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      font-family: "Outfit", sans-serif;
      background:
        radial-gradient(ellipse at 71% 44%, rgba(196, 210, 236, .90), transparent 36vw),
        radial-gradient(ellipse at 82% 69%, rgba(207, 219, 241, .82), transparent 34vw),
        radial-gradient(ellipse at 18% 78%, rgba(102, 223, 22, .15), transparent 28vw),
        radial-gradient(circle at var(--mx) var(--my), rgba(18, 184, 255, .13), transparent 32vw),
        linear-gradient(115deg, #fbfffb 0%, #f7fdf9 24%, #eceff8 48%, #cbd8ef 100%);
    }

    .ms-v28-page::before, .ms-v28-page::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    .ms-v28-page::before {
      z-index: -3;
      opacity: .55;
      background:
        linear-gradient(90deg, rgba(21, 89, 199, .045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(21, 89, 199, .035) 1px, transparent 1px);
      background-size: 72px 72px;
      -webkit-mask-image: radial-gradient(circle at 58% 44%, black 0 48%, transparent 82%);
    }

    .ms-v28-page::after {
      z-index: -2;
      opacity: .42;
      background:
        radial-gradient(circle at 74% 38%, rgba(18, 184, 255, .16), transparent 17%),
        radial-gradient(circle at 82% 62%, rgba(102, 223, 22, .11), transparent 16%),
        radial-gradient(circle at 13% 22%, rgba(21, 89, 199, .09), transparent 18%);
      filter: blur(4px);
    }

    .ms-v28-page a {
      color: inherit;
      text-decoration: none;
    }

    .ms-v28-page button, .ms-v28-page a {
      -webkit-tap-highlight-color: transparent;
    }

    .ms-v28-page .page {
      width: min(100%, 1672px);
      min-height: 100vh;
      margin: 0 auto;
      padding: clamp(28px, 2.7vw, 46px) clamp(34px, 3.2vw, 58px);
      background:
        radial-gradient(ellipse at 75% 52%, rgba(196,210,236,.54) 0%, rgba(207,219,241,.34) 48%, transparent 82%),
        radial-gradient(ellipse at 38% 64%, rgba(255,255,255,.38), transparent 52%);
    }

    .ms-v28-page .nav {
      position: relative;
      z-index: 30;
      min-height: 72px;
      display: grid;
      grid-template-columns: 315px 1fr auto;
      align-items: center;
      gap: 24px;
      padding: 0 2px;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .ms-v28-page .brand img {
      width: 220px;
      max-width: 100%;
      display: block;
    }

    .ms-v28-page .menu {
      display: flex;
      justify-content: center;
      gap: clamp(28px, 3.15vw, 56px);
      color: rgba(5, 22, 63, .84);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -.025em;
    }

    .ms-v28-page .menu a {
      position: relative;
      padding: 13px 0;
    }

    .ms-v28-page .menu a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--green), var(--blue-electric));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .28s ease;
    }

    .ms-v28-page .menu a:hover::after, .ms-v28-page .menu a.active::after {
      transform: scaleX(1);
    }

    .ms-v28-page .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ms-v28-page .circle-btn, .ms-v28-page .access-btn, .ms-v28-page .hero-btn {
      border: 0;
      cursor: pointer;
      font-family: inherit;
      font-weight: 850;
      transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
    }

    .ms-v28-page .circle-btn {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--ink);
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,249,255,.82));
      box-shadow:
        0 16px 38px rgba(21,89,199,.12),
        0 0 0 1px rgba(255,255,255,.82),
        inset 0 0 0 1px rgba(21,89,199,.08);
      font-size: 24px;
    }

    .ms-v28-page .access-btn {
      position: relative;
      min-height: 58px;
      display: inline-flex;
      align-items: center;
      padding: 0 34px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #0b35ff 0%, #0c73ff 58%, #12b6ff 100%);
      box-shadow: 0 19px 52px rgba(21, 89, 199, .34), inset 0 0 0 1px rgba(255,255,255,.26);
      overflow: hidden;
      animation: button-breathe-blue 4.8s ease-in-out infinite;
    }

    .ms-v28-page .access-btn::after {
      content: "";
      position: absolute;
      inset: -70% auto -70% -42%;
      width: 36%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.76), transparent);
      transform: rotate(18deg);
      animation: button-sheen 4.2s ease-in-out infinite;
    }

    .ms-v28-page .circle-btn:hover, .ms-v28-page .access-btn:hover, .ms-v28-page .hero-btn:hover {
      transform: translateY(-4px);
      filter: saturate(1.12);
    }

    .ms-v28-page .hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(640px, .76fr) minmax(760px, 1.24fr);
      align-items: start;
      gap: clamp(14px, 1.4vw, 30px);
      min-height: calc(100vh - 96px);
      padding: clamp(48px, 6.1vh, 64px) 0 0;
      isolation: isolate;
    }

    .ms-v28-page .hero::after {
      content: none;
    }

    .ms-v28-page .copy {
      position: relative;
      z-index: 30;
      text-align: left;
    }

    .ms-v28-page .copy::before {
      content: "";
      position: absolute;
      inset: -96px -120px -105px -72px;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 18% 44%, rgba(251,255,251,.60) 0%, rgba(236,239,248,.28) 48%, transparent 82%),
        linear-gradient(90deg, rgba(251,255,251,.34) 0%, rgba(236,239,248,.18) 56%, transparent 100%);
      filter: blur(36px);
      opacity: .54;
    }

    .ms-v28-page .kicker {
      display: none;
      align-items: center;
      gap: 13px;
      min-height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      color: #1f7c45;
      background: rgba(255,255,255,.70);
      box-shadow: 0 18px 48px rgba(21,89,199,.08), inset 0 0 0 1px rgba(255,255,255,.9);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
      backdrop-filter: blur(16px);
    }

    .ms-v28-page .kicker::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 8px rgba(102,223,22,.16), 0 0 30px rgba(102,223,22,.68);
    }

    .ms-v28-page h1 {
      margin: 0 0 24px;
      font-family: "Ethnocentric", "Audiowide", "Orbitron", sans-serif;
      font-size: clamp(44px, 4.22vw, 71px);
      line-height: 1.48;
      letter-spacing: -.01em;
      font-weight: 400;
      color: var(--ink);
      text-transform: uppercase;
      text-shadow: 0 12px 34px rgba(5,22,63,.12);
    }

    .ms-v28-page h1 span {
      display: block;
      width: max-content;
      max-width: 112%;
      transform: scaleX(.91);
      transform-origin: left center;
    }

    .ms-v28-page h1 .accent {
      background: linear-gradient(98deg, #1559c7 0%, #13b8ff 46%, #66df16 96%);
      background-size: 180% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: title-sheen 5.8s ease-in-out infinite;
    }

    .ms-v28-page h1 .auto-word {
      position: relative;
      isolation: isolate;
      background:
      linear-gradient(112deg, transparent 0 36%, rgba(255,255,255,.74) 43%, rgba(48,235,255,.62) 47%, rgba(103,255,67,.50) 51%, transparent 60% 100%),
      repeating-linear-gradient(108deg, rgba(255,255,255,.20) 0 1px, transparent 1px 16px),
      linear-gradient(98deg, #104fc8 0%, #0b92ff 28%, #18d3e3 54%, #62e532 88%, #0f8cff 100%);
      background-size: 310% 100%, 140px 100%, 170% 100%;
      background-position: -210% 50%, 0 50%, 30% 50%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: none;
      filter: none;
      animation: auto-holo-core 7.4s cubic-bezier(.45,0,.2,1) infinite;
    }

    .ms-v28-page h1 .auto-word::after {
      content: none;
      display: none;
    }

    .ms-v28-page .lead {
      max-width: 620px;
      margin: 0;
      color: rgba(5, 22, 63, .74);
      font-size: clamp(20px, 1.45vw, 25px);
      line-height: 1.38;
      font-weight: 500;
    }

    .ms-v28-page .lead strong {
      display: block;
      color: var(--ink);
      font-weight: 900;
    }

    .ms-v28-page .actions {
      display: flex;
      gap: 28px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

    .ms-v28-page .hero-btn {
      position: relative;
      min-width: 294px;
      min-height: 78px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 30px;
      border-radius: 999px;
      overflow: hidden;
      isolation: isolate;
      font-size: 20px;
      font-weight: 800;
      background-size: 100% 100%, 220% 100%, 100% 100%;
      animation: button-reactor-breathe 5.8s ease-in-out infinite;
      will-change: transform, filter;
    }

    .ms-v28-page .hero-btn::before, .ms-v28-page .hero-btn::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .ms-v28-page .hero-btn::before {
      inset: -2px;
      z-index: 0;
      border-radius: inherit;
      padding: 2px;
      background:
        conic-gradient(
          from var(--border-angle, 0deg),
          transparent 0 34%,
          rgba(255,255,255,.88) 42%,
          var(--rim-a) 50%,
          var(--rim-b) 62%,
          rgba(255,255,255,.74) 70%,
          transparent 80% 100%
        );
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .86;
      filter: drop-shadow(0 0 14px var(--rim-glow));
      animation: reactor-border 5.4s cubic-bezier(.45,0,.2,1) infinite;
    }

    .ms-v28-page .hero-btn::after {
      inset: 8px 12px;
      width: auto;
      z-index: 0;
      border-radius: inherit;
      background:
        linear-gradient(100deg, transparent 0 36%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.22) 52%, transparent 62% 100%),
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,255,255,.18) 23px 24px, transparent 24px 52px);
      background-size: 270% 100%, 90px 100%;
      background-position: -160% 50%, 0 50%;
      opacity: .38;
      mix-blend-mode: screen;
      animation: reactor-sheen 6.8s cubic-bezier(.45,0,.2,1) infinite;
    }

    .ms-v28-page .hero-btn:hover::before {
      opacity: 1;
      animation-duration: 2.6s;
      filter: drop-shadow(0 0 20px var(--rim-glow));
    }

    .ms-v28-page .hero-btn:hover::after {
      opacity: .72;
      animation-duration: 2.7s;
    }

    .ms-v28-page .hero-btn > * {
      position: relative;
      z-index: 1;
    }

    .ms-v28-page .demo {
      --rim-a: #eaffdf;
      --rim-b: #66df16;
      --rim-glow: rgba(102,223,22,.86);
      color: #fff;
      background:
        radial-gradient(ellipse 65% 160% at 20% 0%, rgba(255,255,255,.28), transparent 52%),
        linear-gradient(112deg, #86ff20 0%, #20e814 28%, #00b94a 58%, #08d64b 100%),
        linear-gradient(135deg, #73ff1a 0%, #13d114 48%, #04a848 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.38),
        0 0 19px rgba(102,223,22,.76),
        0 21px 52px rgba(29,198,36,.36);
    }

    .ms-v28-page .access {
      --rim-a: #d9f6ff;
      --rim-b: #13b8ff;
      --rim-glow: rgba(19,184,255,.82);
      color: #fff;
      background:
        radial-gradient(ellipse 70% 160% at 20% 0%, rgba(255,255,255,.24), transparent 54%),
        linear-gradient(112deg, #3f6cff 0%, #0758f4 34%, #0078ff 62%, #00bdff 100%),
        linear-gradient(135deg, #2658ff 0%, #0758f4 50%, #00a6ff 100%);
      box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.52),
        0 0 24px rgba(19,184,255,.72),
        0 24px 58px rgba(21,89,199,.42);
    }

    .ms-v28-page .benefit-rail, .ms-v28-page .metric-rail {
      display: flex;
      align-items: center;
      width: min(calc(100vw - 112px), 620px);
      border-radius: 25px;
      background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(246,252,255,.46));
      box-shadow:
        0 22px 62px rgba(21,89,199,.11),
        inset 0 0 0 1px rgba(255,255,255,.9),
        inset 0 0 24px rgba(19,184,255,.05);
      backdrop-filter: blur(18px);
    }

    .ms-v28-page .benefit-rail {
      gap: 0;
      margin-top: 24px;
      padding: 8px 12px;
      justify-content: space-between;
    }

    .ms-v28-page .benefit {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      flex: 1;
      padding: 0 12px;
      border-radius: 0;
      color: rgba(5,22,63,.82);
      background: transparent;
      font-size: 13px;
      font-weight: 850;
      white-space: nowrap;
    }

    .ms-v28-page .benefit + .benefit {
      border-left: 1px solid rgba(21,89,199,.18);
    }

    .ms-v28-page .benefit strong, .ms-v28-page .benefit small {
      display: block;
    }

    .ms-v28-page .benefit small {
      margin-top: 4px;
      color: rgba(5,22,63,.68);
      font-size: 11px;
      font-weight: 500;
    }

    .ms-v28-page .mini-icon {
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(145deg, #8cff35, #17c91f 52%, #08a94c);
      box-shadow: 0 14px 34px rgba(36,199,45,.28), inset 0 0 0 1px rgba(255,255,255,.36);
      font-size: 21px;
      font-weight: 900;
    }

    .ms-v28-page .benefit:nth-child(2) .mini-icon {
      border-radius: 50%;
      background: linear-gradient(145deg, #17d2ff, #075eff 64%, #3d77ff);
      box-shadow: 0 14px 34px rgba(21,89,199,.25), inset 0 0 0 1px rgba(255,255,255,.36);
    }

    .ms-v28-page .benefit:nth-child(3) .mini-icon {
      border-radius: 50%;
      background: conic-gradient(from 0deg, #4e5dff 0 28%, #fff 28% 30%, #6771ff 30% 72%, #13b8ff 72% 100%);
      box-shadow: 0 14px 34px rgba(21,89,199,.25), inset 0 0 0 1px rgba(255,255,255,.36);
    }

    .ms-v28-page .metric-rail {
      justify-content: space-between;
      margin-top: 12px;
      padding: 14px 18px;
    }

    .ms-v28-page .metric {
      min-width: 0;
      display: grid;
      grid-template-columns: 32px auto;
      align-items: center;
      gap: 10px;
      padding-right: 18px;
      border-right: 1px solid rgba(21,89,199,.12);
    }

    .ms-v28-page .metric:last-child {
      border-right: 0;
      padding-right: 0;
    }

    .ms-v28-page .metric strong {
      display: block;
      color: var(--ink);
      font-size: 17px;
      line-height: 1.08;
    }

    .ms-v28-page .metric span:last-child {
      color: rgba(5,22,63,.58);
      font-size: 12px;
      font-weight: 800;
    }

    .ms-v28-page .visual {
      position: relative;
      z-index: 1;
      min-height: min(758px, 58.5vw);
      display: block;
      isolation: isolate;
      overflow: visible;
    }

    .ms-v28-page .visual::before {
      content: none;
    }

    .ms-v28-page .visual::after {
      content: none;
    }

    .ms-v28-page .video-stage {
      position: absolute;
      z-index: 2;
      inset: -90px -1vw -92px -240px;
      width: auto;
      aspect-ratio: auto;
      margin: 0;
      overflow: visible;
      background: transparent;
      box-shadow: none;
      transform-origin: 54% 58%;
      -webkit-mask-image: radial-gradient(
        ellipse 74% 70% at 66% 52%,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,.42) 67%,
        rgba(0,0,0,.04) 82%,
        rgba(0,0,0,0) 100%
      );
      -webkit-mask-image: radial-gradient(
        ellipse 74% 70% at 66% 52%,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,.42) 67%,
        rgba(0,0,0,.04) 82%,
        rgba(0,0,0,0) 100%
      );
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }

    .ms-v28-page .video-stage::before {
      content: none;
    }

    .ms-v28-page .video-stage::after {
      content: none;
    }

    .ms-v28-page .hero-video, .ms-v28-page .video-poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 64% 51%;
      transform: scale(1);
      filter: none;
      mix-blend-mode: normal;
    }

    .ms-v28-page .hero-video {
      z-index: 1;
      display: block;
    }

    .ms-v28-page .video-poster {
      z-index: 1;
      display: none;
    }

    .ms-v28-page .video-glow {
      display: none;
    }

    .ms-v28-page .video-visual > :not(.video-stage) {
      display: none !important;
    }

    .ms-v28-page .aura {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(930px, 76vw);
      aspect-ratio: 1.33;
      transform: translate(-50%, -48%);
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(18,184,255,.21), transparent 52%),
        radial-gradient(ellipse at center, rgba(102,223,22,.14), transparent 66%);
      filter: blur(10px);
      animation: aura-drift 7s ease-in-out infinite;
    }

    .ms-v28-page .floor-ring {
      position: absolute;
      left: 50%;
      bottom: 6%;
      width: min(880px, 74vw);
      height: 130px;
      transform: translateX(-50%) perspective(920px) rotateX(67deg);
      border: 2px solid rgba(21,89,199,.08);
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(21,89,199,.22), transparent 60%),
        radial-gradient(ellipse at center, rgba(102,223,22,.15), transparent 75%);
      filter: blur(1px);
    }

    .ms-v28-page .chip-stage {
      position: relative;
      z-index: 5;
      width: min(700px, 50.2vw);
      display: grid;
      place-items: center;
      margin-top: -66px;
      margin-left: 18px;
      transform-style: preserve-3d;
    }

    .ms-v28-page .chip-stage::before {
      content: "";
      position: absolute;
      inset: 12% 15% 8%;
      z-index: -1;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(21,89,199,.24), transparent 68%);
      filter: blur(26px);
      transform: translateY(15%);
    }

    .ms-v28-page .chip-asset {
      width: 100%;
      height: auto;
      display: block;
      filter:
        drop-shadow(0 46px 80px rgba(21, 89, 199, .20))
        drop-shadow(0 0 38px rgba(18, 184, 255, .24));
      transform-origin: center center;
      animation: chip-breathe 5.8s ease-in-out infinite;
      user-select: none;
      pointer-events: none;
    }

    .ms-v28-page .core-logo {
      position: absolute;
      z-index: 8;
      left: 50.35%;
      top: 50.2%;
      width: clamp(108px, 9.4vw, 146px);
      aspect-ratio: 1;
      transform: translate(-50%, -50%) rotate(-6deg) skewX(-2deg) skewY(.6deg);
      display: grid;
      place-items: center;
      border-radius: 26%;
      background:
        radial-gradient(circle at 42% 30%, rgba(255,255,255,.94), rgba(218,249,255,.82) 42%, rgba(75,203,255,.38) 74%, rgba(102,223,22,.18)),
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(21,89,199,.18));
      box-shadow:
        0 0 0 7px rgba(255,255,255,.28),
        0 24px 48px rgba(21,89,199,.22),
        0 0 46px rgba(18,184,255,.54),
        0 0 32px rgba(102,223,22,.28),
        inset 0 0 0 2px rgba(255,255,255,.92),
        inset 0 18px 32px rgba(255,255,255,.42),
        inset 0 -18px 32px rgba(21,89,199,.20);
      overflow: hidden;
      backdrop-filter: blur(12px) saturate(1.28);
      animation: core-pulse 3.2s ease-in-out infinite;
    }

    .ms-v28-page .core-logo::before {
      content: "";
      position: absolute;
      inset: 8%;
      border-radius: 24%;
      border: 1px solid rgba(255,255,255,.72);
      background:
        linear-gradient(120deg, rgba(255,255,255,.62), transparent 36%),
        radial-gradient(circle at 72% 72%, rgba(102,223,22,.22), transparent 38%);
      opacity: .9;
    }

    .ms-v28-page .core-logo::after {
      content: "";
      position: absolute;
      width: 38%;
      height: 150%;
      left: -22%;
      top: -25%;
      transform: rotate(24deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
      mix-blend-mode: screen;
      animation: core-sheen 4.8s ease-in-out infinite;
    }

    .ms-v28-page .core-logo img {
      position: relative;
      z-index: 2;
      width: 76%;
      height: 76%;
      object-fit: contain;
      transform: translateY(1px);
      filter:
        drop-shadow(0 4px 9px rgba(21,89,199,.20))
        drop-shadow(0 0 11px rgba(102,223,22,.72))
        drop-shadow(0 0 24px rgba(21,89,199,.48));
    }

    .ms-v28-page .connection-map {
      position: absolute;
      inset: 0 -3% 5%;
      z-index: 8;
      width: 104%;
      height: 93%;
      overflow: visible;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .ms-v28-page .connection-map path {
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-dasharray: none;
      opacity: .84;
      filter:
        drop-shadow(0 0 6px rgba(18,184,255,.48))
        drop-shadow(0 0 12px rgba(102,223,22,.20));
      animation: none;
    }

    .ms-v28-page .connection-map .link-ghost {
      stroke: rgba(255,255,255,.70);
      stroke-width: 7;
      stroke-dasharray: none;
      opacity: .34;
      filter: blur(.2px);
      animation: none;
    }

    .ms-v28-page .connection-map .link-spark {
      display: none;
      stroke-width: 4;
      stroke-dasharray: 1 82;
      opacity: .94;
      animation: spark-flow 2.8s cubic-bezier(.45,0,.2,1) infinite;
    }

    .ms-v28-page .connection-map circle {
      display: none;
      fill: #13b8ff;
      filter: drop-shadow(0 0 10px rgba(18,184,255,.85));
      animation: node-pulse 2.4s ease-in-out infinite;
    }

    .ms-v28-page .module {
      position: absolute;
      z-index: 16;
      width: 214px;
      min-height: 88px;
      display: grid;
      grid-template-columns: 62px auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,.96);
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.84), rgba(238,249,255,.54) 62%, rgba(225,246,255,.42)),
        radial-gradient(circle at 12% 14%, rgba(255,255,255,.98), transparent 44%),
        radial-gradient(circle at 88% 100%, rgba(18,184,255,.10), transparent 52%);
      box-shadow:
        0 22px 58px rgba(21,89,199,.10),
        0 0 20px rgba(255,255,255,.55),
        0 0 0 1px rgba(255,255,255,.70),
        inset 0 0 0 1px rgba(255,255,255,.62),
        inset 0 -16px 36px rgba(21,89,199,.045);
      backdrop-filter: blur(22px) saturate(1.22);
      transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
    }

    .ms-v28-page .module::before {
      content: "";
      position: absolute;
      top: 50%;
      right: -7px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #3bdcff;
      box-shadow:
        0 -16px 0 #3bdcff,
        0 16px 0 #3bdcff,
        0 0 10px rgba(18,184,255,.88),
        0 -16px 10px rgba(18,184,255,.7),
        0 16px 10px rgba(18,184,255,.7);
      transform: translateY(-50%);
    }

    .ms-v28-page .mod-crm::before, .ms-v28-page .mod-agenda::before, .ms-v28-page .mod-stock::before {
      right: auto;
      left: -7px;
    }

    .ms-v28-page .module::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(125deg, rgba(255,255,255,.66), transparent 34%, rgba(18,184,255,.08) 82%, rgba(255,255,255,.22));
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .ms-v28-page .module:hover {
      transform: translateY(-7px) scale(1.025);
      box-shadow:
        0 36px 78px rgba(21,89,199,.19),
        0 0 34px rgba(18,184,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.95);
    }

    .ms-v28-page .module-icon {
      position: relative;
      z-index: 2;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      font-size: 34px;
      box-shadow:
        0 18px 36px rgba(21,89,199,.18),
        0 0 24px rgba(255,255,255,.48),
        inset 0 0 0 1px rgba(255,255,255,.46),
        inset 0 12px 20px rgba(255,255,255,.22),
        inset 0 -12px 18px rgba(0,0,0,.08);
      overflow: hidden;
    }

    .ms-v28-page .module-icon::after {
      content: "";
      position: absolute;
      inset: 8px 9px auto 9px;
      height: 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.28);
      filter: blur(.2px);
    }

    .ms-v28-page .module-icon i {
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,.12));
    }

    .ms-v28-page .module > div:not(.module-icon), .ms-v28-page .module .wave, .ms-v28-page .mini-chart {
      position: relative;
      z-index: 2;
    }

    .ms-v28-page .module b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .025em;
      text-transform: uppercase;
    }

    .ms-v28-page .module span {
      display: block;
      color: rgba(5,22,63,.58);
      font-size: 11px;
      line-height: 1.25;
      font-weight: 800;
    }

    .ms-v28-page .whatsapp .module-icon { background: radial-gradient(circle at 35% 22%, #8dff78, #25cc43 46%, #15a83b); }
    .ms-v28-page .call .module-icon { background: radial-gradient(circle at 35% 22%, #79b9ff, #2777ff 48%, #1559e9); }
    .ms-v28-page .report .module-icon { background: radial-gradient(circle at 35% 22%, #b7a7ff, #7058e9 48%, #5140c8); }
    .ms-v28-page .crm .module-icon { background: radial-gradient(circle at 35% 22%, #99a8ff, #5069ff 48%, #324bea); }
    .ms-v28-page .agenda .module-icon { background: radial-gradient(circle at 35% 22%, #92f15a, #49cc23 48%, #32aa18); }
    .ms-v28-page .stock .module-icon { background: radial-gradient(circle at 35% 22%, #83d8ff, #2ba5ff 48%, #1777e8); }

    .ms-v28-page .mod-whatsapp { left: 3%; top: 8%; }
    .ms-v28-page .mod-call { left: 1%; top: 31%; }
    .ms-v28-page .mod-report { left: 1%; bottom: 26%; }
    .ms-v28-page .mod-crm { right: 0; top: 21%; }
    .ms-v28-page .mod-agenda { right: 0; top: 43%; }
    .ms-v28-page .mod-stock { right: 1%; bottom: 24%; }

    .ms-v28-page .wave {
      grid-column: 1 / -1;
      display: flex;
      align-items: end;
      gap: 3px;
      height: 18px;
      padding-left: 4px;
      opacity: .82;
    }

    .ms-v28-page .wave i {
      width: 3px;
      height: 7px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--blue-electric), #8adeff);
      animation: wave 1.05s ease-in-out infinite;
    }

    .ms-v28-page .mini-chart {
      grid-column: 1 / -1;
      width: 100%;
      height: 28px;
      margin-top: 2px;
      opacity: .62;
    }

    .ms-v28-page .mini-chart polyline {
      fill: none;
      stroke: url(#chartStroke);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 8px rgba(21,89,199,.18));
    }

    .ms-v28-page .mini-chart circle {
      fill: #89dfff;
      opacity: .78;
    }

    .ms-v28-page .wave i:nth-child(2) { animation-delay: -.1s; }
    .ms-v28-page .wave i:nth-child(3) { animation-delay: -.2s; }
    .ms-v28-page .wave i:nth-child(4) { animation-delay: -.3s; }
    .ms-v28-page .wave i:nth-child(5) { animation-delay: -.4s; }
    .ms-v28-page .wave i:nth-child(6) { animation-delay: -.5s; }
    .ms-v28-page .wave i:nth-child(7) { animation-delay: -.6s; }
    .ms-v28-page .wave i:nth-child(8) { animation-delay: -.7s; }

    .ms-v28-page .integration-row {
      position: absolute;
      z-index: 18;
      left: 50%;
      bottom: 4%;
      display: grid;
      justify-items: center;
      gap: 12px;
      transform: translateX(-50%);
    }

    .ms-v28-page .integration-row p {
      margin: 0;
      color: rgba(5,22,63,.62);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
      text-shadow: 0 2px 12px rgba(255,255,255,.95), 0 0 18px rgba(255,255,255,.88);
    }

    .ms-v28-page .apps {
      display: flex;
      gap: 14px;
    }

    .ms-v28-page .app {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: var(--ink);
      background: rgba(255,255,255,.74);
      box-shadow: 0 16px 42px rgba(21,89,199,.11), inset 0 0 0 1px rgba(255,255,255,.9);
      font-size: 24px;
      font-weight: 900;
    }

    .ms-v28-page .green { color: #17a943; }
    .ms-v28-page .blue { color: var(--blue); }
    .ms-v28-page .purple { color: #735ee9; }

    @keyframes title-sheen {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    @keyframes auto-holo-core {
      0%, 18% {
        background-position: -210% 50%, 0 50%, 30% 50%;
      }
      40% {
        background-position: -18% 50%, 18px 50%, 68% 50%;
      }
      56% {
        background-position: 64% 50%, 34px 50%, 56% 50%;
      }
      74%, 100% {
        background-position: 220% 50%, 56px 50%, 36% 50%;
      }
    }

    @keyframes button-sheen {
      0%, 44% { transform: translateX(0) rotate(18deg); opacity: 0; }
      54% { opacity: .9; }
      76%, 100% { transform: translateX(460%) rotate(18deg); opacity: 0; }
    }

    @keyframes button-breathe-green {
      0%, 100% {
        box-shadow:
          0 20px 54px rgba(102,223,22,.32),
          0 0 0 1px rgba(255,255,255,.24) inset;
      }
      50% {
        box-shadow:
          0 22px 62px rgba(102,223,22,.42),
          0 0 30px rgba(102,223,22,.28),
          0 0 0 1px rgba(255,255,255,.32) inset;
      }
    }

    @keyframes button-breathe-blue {
      0%, 100% { box-shadow: 0 18px 48px rgba(21, 89, 199, .28); }
      50% { box-shadow: 0 20px 58px rgba(21, 89, 199, .36), 0 0 34px rgba(18,184,255,.24); }
    }

    @keyframes button-breathe-white {
      0%, 100% {
        box-shadow:
          inset 0 0 0 1px rgba(21,89,199,.22),
          0 18px 46px rgba(21,89,199,.12);
      }
      50% {
        box-shadow:
          inset 0 0 0 1px rgba(21,89,199,.28),
          0 20px 54px rgba(21,89,199,.17),
          0 0 24px rgba(18,184,255,.13);
      }
    }

    @keyframes button-breathe-soft {
      0%, 100% { filter: saturate(1); }
      50% { filter: saturate(1.08); }
    }

    @keyframes reactor-border {
      0%, 38% {
        --border-angle: 0deg;
        opacity: .56;
      }
      54% {
        opacity: 1;
      }
      82%, 100% {
        --border-angle: 360deg;
        opacity: .66;
      }
    }

    @keyframes reactor-sheen {
      0%, 34% {
        background-position: -160% 50%, 0 50%;
        opacity: .24;
      }
      48% {
        opacity: .70;
      }
      70%, 100% {
        background-position: 180% 50%, 44px 50%;
        opacity: .30;
      }
    }

    @keyframes button-reactor-breathe {
      0%, 100% {
        filter: saturate(1) brightness(1);
        background-position: 0 0, 0 50%, 0 50%;
      }
      50% {
        filter: saturate(1.18) brightness(1.03);
        background-position: 0 0, 100% 50%, 0 50%;
      }
    }

    @keyframes aura-drift {
      0%, 100% { transform: translate(-50%, -48%) scale(1); }
      50% { transform: translate(-48%, -50%) scale(1.04); }
    }

    @keyframes chip-breathe {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-12px) scale(1.012); }
    }

    @keyframes core-pulse {
      0%, 100% {
        box-shadow:
          0 0 0 7px rgba(255,255,255,.28),
          0 24px 48px rgba(21,89,199,.22),
          0 0 46px rgba(18,184,255,.54),
          0 0 32px rgba(102,223,22,.28),
          inset 0 0 0 2px rgba(255,255,255,.92),
          inset 0 18px 32px rgba(255,255,255,.42),
          inset 0 -18px 32px rgba(21,89,199,.20);
      }
      50% {
        box-shadow:
          0 0 0 9px rgba(102,223,22,.16),
          0 26px 54px rgba(21,89,199,.24),
          0 0 58px rgba(18,184,255,.62),
          0 0 44px rgba(102,223,22,.40),
          inset 0 0 0 2px rgba(255,255,255,.98),
          inset 0 20px 36px rgba(255,255,255,.48),
          inset 0 -18px 34px rgba(21,89,199,.24);
      }
    }

    @keyframes core-sheen {
      0%, 42% { transform: translateX(0) rotate(24deg); opacity: 0; }
      52% { opacity: .85; }
      70%, 100% { transform: translateX(390%) rotate(24deg); opacity: 0; }
    }

    @keyframes dash-flow {
      to { stroke-dashoffset: -68; }
    }

    @keyframes spark-flow {
      0% { stroke-dashoffset: 92; opacity: 0; }
      18% { opacity: .92; }
      78% { opacity: .92; }
      100% { stroke-dashoffset: -92; opacity: 0; }
    }

    @keyframes node-pulse {
      0%, 100% { opacity: .42; transform: scale(.9); }
      50% { opacity: 1; transform: scale(1.22); }
    }

    @keyframes wave {
      0%, 100% { height: 6px; }
      50% { height: 20px; }
    }

    @media (max-width: 1280px) {
      .ms-v28-page .nav {
        grid-template-columns: 220px 1fr auto;
      }

      .ms-v28-page .brand img {
        width: 195px;
      }

      .ms-v28-page .menu {
        gap: 22px;
        font-size: 12px;
      }

      .ms-v28-page .hero {
        grid-template-columns: 1fr;
        gap: 42px;
      }

      .ms-v28-page .copy {
        max-width: 780px;
      }

      .ms-v28-page .visual {
        min-height: 760px;
      }

      .ms-v28-page .video-stage {
        position: relative;
        inset: auto;
        width: min(980px, 94vw);
        aspect-ratio: 16 / 9;
        margin: 0 auto;
        -webkit-mask-image: radial-gradient(ellipse 86% 86% at 58% 50%, #000 0 58%, rgba(0,0,0,.68) 76%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 86% 86% at 58% 50%, #000 0 58%, rgba(0,0,0,.68) 76%, transparent 100%);
      }

      .ms-v28-page .chip-stage {
        width: min(720px, 82vw);
      }
    }

    @media (max-width: 760px) {
      .ms-v28-page .page {
        width: 100%;
        max-width: 100vw;
        padding: 12px;
        overflow: hidden;
      }

      .ms-v28-page .nav {
        grid-template-columns: 1fr;
        min-height: 76px;
        padding: 12px 14px 12px 18px;
        border-radius: 32px;
      }

      .ms-v28-page .brand img {
        width: 158px;
      }

      .ms-v28-page .menu, .ms-v28-page .nav-actions {
        display: none;
      }

      .ms-v28-page .hero {
        display: block;
        min-height: auto;
        padding: 36px 0 20px;
      }

      .ms-v28-page .copy {
        max-width: calc(100vw - 24px);
        overflow: hidden;
      }

      .ms-v28-page .kicker {
        max-width: 100%;
        min-height: auto;
        overflow: visible;
        padding: 10px 12px;
        font-size: 9px;
        line-height: 1.35;
        white-space: normal;
      }

      .ms-v28-page h1 {
        font-size: clamp(31px, 8.6vw, 38px);
        line-height: 1.28;
        letter-spacing: -.012em;
        margin-bottom: 24px;
      }

      .ms-v28-page h1 span {
        max-width: 120%;
        transform: scaleX(.88);
      }

      .ms-v28-page .lead {
        max-width: 350px;
        font-size: 16px;
      }

      .ms-v28-page .actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: min(345px, 100%);
        margin-top: 24px;
      }

      .ms-v28-page .hero-btn {
        min-height: 62px;
        width: 100%;
        min-width: 0;
        padding: 0 18px;
        font-size: 15px;
      }

      .ms-v28-page .benefit-rail, .ms-v28-page .metric-rail {
        width: 100%;
      }

      .ms-v28-page .benefit-rail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 12px 16px;
        overflow: visible;
        scrollbar-width: none;
      }

      .ms-v28-page .benefit-rail::-webkit-scrollbar {
        display: none;
      }

      .ms-v28-page .benefit {
        min-width: 0;
        min-height: 62px;
        justify-content: flex-start;
        gap: 12px;
        padding: 8px 0;
        border-left: 0;
        font-size: 13px;
        white-space: normal;
      }

      .ms-v28-page .benefit + .benefit {
        border-left: 0;
        border-top: 1px solid rgba(21,89,199,.16);
      }

      .ms-v28-page .benefit small {
        font-size: 12px;
      }

      .ms-v28-page .mini-icon {
        width: 44px;
        height: 44px;
        border-radius: 15px;
        font-size: 23px;
      }

      .ms-v28-page .metric-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: 10px 8px;
      }

      .ms-v28-page .metric {
        display: block;
        text-align: center;
        border-right: 1px solid rgba(21,89,199,.12);
        border-bottom: 0;
        padding: 0 6px;
      }

      .ms-v28-page .metric:last-child {
        border-right: 0;
      }

      .ms-v28-page .metric .mini-icon {
        margin: 0 auto 5px;
      }

      .ms-v28-page .metric strong {
        font-size: 14px;
      }

      .ms-v28-page .metric span:last-child {
        font-size: 10px;
      }

      .ms-v28-page .visual {
        min-height: auto;
        margin-top: 20px;
      }

      .ms-v28-page .video-stage {
        position: relative;
        inset: auto;
        width: calc(100vw + 18px);
        aspect-ratio: 16 / 9;
        margin: -12px -9px 0;
        box-shadow: none;
        -webkit-mask-image: radial-gradient(ellipse 92% 84% at 52% 50%, #000 0 54%, rgba(0,0,0,.68) 73%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 92% 84% at 52% 50%, #000 0 54%, rgba(0,0,0,.68) 73%, transparent 100%);
      }

      .ms-v28-page .hero-video, .ms-v28-page .video-poster {
        transform: scale(1.02);
        object-position: 50% 50%;
      }

      .ms-v28-page .chip-stage {
        width: 430px;
        max-width: 118vw;
        transform: translateX(0);
      }

      .ms-v28-page .core-logo {
        width: 92px;
        border-radius: 28px;
      }

      .ms-v28-page .module {
        width: 188px;
        min-height: 78px;
        grid-template-columns: 42px auto;
        gap: 10px;
        padding: 10px;
        border-radius: 20px;
      }

      .ms-v28-page .module-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 23px;
      }

      .ms-v28-page .module b {
        font-size: 11px;
      }

      .ms-v28-page .module span {
        font-size: 10px;
      }

      .ms-v28-page .mod-whatsapp { left: 0; top: 2%; }
      .ms-v28-page .mod-call { left: 0; top: 17%; }
      .ms-v28-page .mod-report { left: 0; bottom: 22%; }
      .ms-v28-page .mod-crm { right: 0; top: 5%; }
      .ms-v28-page .mod-agenda { right: 0; top: 21%; }
      .ms-v28-page .mod-stock { right: 0; bottom: 22%; }

      .ms-v28-page .connection-map {
        opacity: .62;
      }

      .ms-v28-page .integration-row {
        width: 100%;
        bottom: 0;
      }

      .ms-v28-page .apps {
        max-width: 100%;
        overflow-x: auto;
        padding: 0 8px 4px;
        scrollbar-width: none;
      }

      .ms-v28-page .apps::-webkit-scrollbar {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ms-v28-page *, .ms-v28-page *::before, .ms-v28-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }

      .ms-v28-page .hero-video {
        display: none;
      }

      .ms-v28-page .video-poster {
        display: block;
      }

      .ms-v28-page h1 .auto-word::after, .ms-v28-page .hero-btn::after {
        display: none;
      }
    }

.ms-v28-page {
  position: relative;
  z-index: 10;
  isolation: isolate;
  overflow-x: hidden;
}

.ms-v28-page::before,
.ms-v28-page::after {
  position: absolute;
}

.ms-v28-page .page {
  position: relative;
  z-index: 1;
}
