/*
* Copyright FSys Tech Limited [FSys]. All rights reserved.
*
* FSys light theme. Loaded after tolak.css and overrides it.
* Keeps the Tolak structure and class names; only the look changes.
*/
/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/
:root {
  --tolak-font: "Manrope", sans-serif;
  --tolak-heading-font: "Manrope", sans-serif;
  --tolak-base: #2c5fec;
  --tolak-base-rgb: 44, 95, 236;
  --tolak-text: #4b5568;
  --tolak-text-rgb: 75, 85, 104;
  --tolak-text-dark: #4b5568;
  --tolak-gray: #f3f6fc;
  --tolak-gray-rgb: 243, 246, 252;
  --tolak-black: #0b1b33;
  --tolak-black-rgb: 11, 27, 51;
  --tolak-black4: #0b1b33;
  --tolak-border-color: #e3e8f2;
  --tolak-border-color-rgb: 227, 232, 242;
  --tolak-border-color2: #e3e8f2;
  --tolak-letter-space: 0;
  /* FSys additions */
  --fsys-ink: #0b1b33;
  --fsys-muted: #6b7489;
  --fsys-surface: #ffffff;
  --fsys-soft: #f6f8fc;
  --fsys-tint: #eaf0fe;
  --fsys-line: #e3e8f2;
  --fsys-base-deep: #1f47bf;
  --fsys-up: #0f8a5f;
  --fsys-up-soft: #e6f5ee;
  --fsys-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 8px 24px rgba(11, 27, 51, 0.06);
  --fsys-shadow-lg: 0 2px 4px rgba(11, 27, 51, 0.04), 0 24px 48px rgba(11, 27, 51, 0.08);
  --fsys-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body {
  font-family: var(--tolak-font);
  color: var(--tolak-text);
  background-color: var(--fsys-surface);
  font-size: 16px;
  line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tolak-heading-font);
  color: var(--fsys-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* No italics anywhere */
em, i:not([class]), .sec-title__tagline, .main-slider-one__sub-title, .about-three__content__quote {
  font-style: normal !important;
}

::selection {
  background-color: rgba(var(--tolak-base-rgb), 0.16);
  color: var(--fsys-ink);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .accrodion-title:focus-visible {
  outline: 2px solid var(--tolak-base);
  outline-offset: 2px;
  border-radius: 8px;
}

.fsys-skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10000;
  background-color: var(--fsys-ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: top 300ms var(--fsys-ease);
}

.fsys-skip-link:focus {
  top: 16px;
  color: #fff;
}

/* The Tolak custom cursor is disabled; keep the native cursor */
.custom-cursor__cursor, .custom-cursor__cursor-two {
  display: none !important;
}

.preloader {
  background-color: var(--fsys-surface);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.tolak-btn {
  font-family: var(--tolak-font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 24px;
  background-color: var(--tolak-base);
  color: #fff;
  box-shadow: 0 1px 2px rgba(var(--tolak-base-rgb), 0.24), 0 8px 16px rgba(var(--tolak-base-rgb), 0.16);
  transition: transform 500ms var(--fsys-ease), box-shadow 500ms var(--fsys-ease), background-color 500ms var(--fsys-ease), color 500ms var(--fsys-ease);
}

.tolak-btn b {
  font-weight: 600;
}

.tolak-btn span {
  background-color: var(--fsys-base-deep);
}

.tolak-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(var(--tolak-base-rgb), 0.24), 0 16px 32px rgba(var(--tolak-base-rgb), 0.2);
}

.tolak-btn:active {
  transform: scale(0.98);
}

.tolak-btn--ghost {
  background-color: var(--fsys-surface);
  color: var(--fsys-ink);
  border: 1px solid var(--fsys-line);
  box-shadow: none;
}

.tolak-btn--ghost span {
  background-color: var(--fsys-tint);
}

.tolak-btn--ghost:hover {
  color: var(--fsys-ink);
  box-shadow: var(--fsys-shadow);
}

.tolak-btn--sm {
  font-size: 14px;
  line-height: 20px;
  padding: 8px 16px;
  border-radius: 999px;
}

.fsys-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--tolak-base);
  transition: gap 500ms var(--fsys-ease), color 500ms var(--fsys-ease);
}

.fsys-link:hover {
  color: var(--fsys-base-deep);
  gap: 12px;
}

/*--------------------------------------------------------------
# Section titles
--------------------------------------------------------------*/
.sec-title, .sec-title-two {
  padding-bottom: 48px;
}

.sec-title__tagline, .sec-title-two__tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--fsys-tint);
  color: var(--tolak-base);
  font-family: var(--tolak-font);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sec-title__tagline__left, .sec-title__tagline__right,
.sec-title-two__tagline__left, .sec-title-two__tagline__right {
  display: none;
}

.sec-title__title, .sec-title-two__title {
  font-size: 36px;
  line-height: 40px;
  color: var(--fsys-ink);
  max-width: 720px;
}

.text-center .sec-title__title, .text-center .sec-title-two__title {
  margin-left: auto;
  margin-right: auto;
}

.sec-title__text {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--tolak-text);
  max-width: 640px;
}

.text-center .sec-title__text {
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------
# Topbar and header
--------------------------------------------------------------*/
.topbar-one {
  background-color: var(--fsys-soft);
  border-bottom: 1px solid var(--fsys-line);
}

.topbar-one::after {
  display: none;
}

.topbar-one__inner {
  padding: 8px 0;
}

.topbar-one__info__item, .topbar-one__links li {
  color: var(--tolak-text);
  font-size: 14px;
}

.topbar-one__info__item a:hover, .topbar-one__links li a:hover {
  color: var(--tolak-base);
}

.topbar-one__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--fsys-up);
  background-color: var(--fsys-up-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

.topbar-one__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--fsys-up);
}

.main-header-three {
  background-color: var(--fsys-surface);
  padding: 12px 0;
}

.main-header-three__inner {
  background-color: var(--fsys-surface);
  border: 1px solid var(--fsys-line);
  border-radius: 999px;
  padding: 8px 12px 8px 24px !important;
  box-shadow: var(--fsys-shadow);
}

.main-header-three.sticky-header--cloned {
  background-color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--fsys-line);
}

.main-header-three.sticky-header--cloned .main-header-three__inner {
  box-shadow: none;
}

.main-header-three__logo img {
  width: 152px;
  height: auto;
}

.main-menu .main-menu__list > li > a {
  font-family: var(--tolak-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--fsys-ink);
  transition: color 500ms var(--fsys-ease);
}

.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a {
  color: var(--tolak-base);
}

.main-header__right {
  gap: 16px;
}

.main-header__cta {
  white-space: nowrap;
}

.main-header__flag {
  width: 32px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--fsys-line);
}

@media (max-width: 1199px) {
  .main-header__cta {
    display: none;
  }
}

/*--------------------------------------------------------------
# Hero (main slider): navy stage with light floating cards
--------------------------------------------------------------*/
.main-slider-one {
  background-color: var(--fsys-surface);
  padding: 0 16px 24px;
}

.main-slider-one__stage {
  --stage: #0a1730;
  --stage-line: rgba(255, 255, 255, 0.12);
  --stage-text: #b9c4da;
  --stage-muted: #8392b0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px;
  background-color: var(--stage);
  padding-bottom: 96px;
}

/* Soft colour glows: flat colours softened with blur */
.main-slider-one__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(96px);
  pointer-events: none;
  animation: fsysDrift 18s var(--fsys-ease) infinite alternate;
}

.main-slider-one__glow--one {
  width: 560px;
  height: 560px;
  right: -96px;
  top: -160px;
  background-color: var(--tolak-base);
  opacity: 0.55;
}

.main-slider-one__glow--two {
  width: 400px;
  height: 400px;
  left: 24%;
  bottom: -240px;
  background-color: #38bdf8;
  opacity: 0.22;
  animation-delay: -6s;
}

@keyframes fsysDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-48px, 32px) scale(1.08); }
}

.main-slider-one__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--stage-line) 1px, transparent 1px), linear-gradient(90deg, var(--stage-line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}

.main-slider-one__item {
  padding: 96px 0 64px;
  background-color: transparent;
}

.main-slider-one__bg, .main-slider-one__bg-svg, .main-slider-one__shape, .main-slider-one__social {
  display: none;
}

.main-slider-one__content {
  padding-left: 0 !important;
  max-width: 680px;
}

.main-slider-one__sub-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: none;
  margin: 0 0 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.main-slider-one__sub-title::before {
  width: 8px;
  height: 8px;
  top: 0;
  margin: 0;
  border-radius: 50%;
  background-color: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}

.main-slider-one__title {
  font-size: 60px !important;
  line-height: 1.05 !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  display: block;
  background-image: linear-gradient(90deg, #ffffff 40%, #9fb3d9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}

.main-slider-one__title .fsys-accent {
  -webkit-text-fill-color: #7ea2ff;
}

.main-slider-one__text__one {
  font-size: 18px;
  line-height: 28px;
  color: var(--stage-text);
  max-width: 560px;
}

.main-slider-one__btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.main-slider-one__btn .tolak-btn {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px rgba(var(--tolak-base-rgb), 0.45);
}

.main-slider-one__btn .fsys-link {
  color: #fff;
}

.main-slider-one__btn .fsys-link:hover {
  color: #c7d6ff;
}

.main-slider-one__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}

.main-slider-one__proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #e3e9f6;
}

.main-slider-one__proof li i {
  color: #4ade80;
}

/* Faster, smoother entrance than the template default */
.main-slider-one .active .main-slider-one__sub-title { transition-delay: 150ms; }
.main-slider-one .active .main-slider-one__title { transition-delay: 300ms; }
.main-slider-one .active .main-slider-one__text { transition-delay: 450ms; }
.main-slider-one .active .main-slider-one__btn { transition-delay: 600ms; }

.main-slider-one__sub-title, .main-slider-one__title, .main-slider-one__text, .main-slider-one__btn {
  transition-duration: 900ms !important;
  transition-timing-function: var(--fsys-ease) !important;
}

.main-slider-one__proof {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease);
}

.main-slider-one .active .main-slider-one__proof {
  opacity: 1;
  transform: none;
  transition-delay: 750ms;
}

/* Visual column */
.main-slider-one__visual {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: perspective(1200px) translateY(48px) rotateX(8deg);
  transition: opacity 1200ms var(--fsys-ease), transform 1200ms var(--fsys-ease);
}

.main-slider-one .active .main-slider-one__visual {
  opacity: 1;
  transform: perspective(1200px) translateY(0) rotateX(0);
  transition-delay: 400ms;
}

/* Trading panel illustration: a light card on the dark stage */
@keyframes fsysPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes fsysFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Numbered slide tabs with autoplay progress */
.main-slider-one__tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 5;
}

.main-slider-one__tabs__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-slider-one__tab {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 16px 0 0;
  border: none;
  background: none;
  text-align: left;
  color: var(--stage-muted);
  font-family: var(--tolak-font);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  transition: color 500ms var(--fsys-ease);
}

.main-slider-one__tab:hover, .main-slider-one__tab.is-active {
  color: #fff;
}

.main-slider-one__tab__num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  color: #7ea2ff;
}

.main-slider-one__tab__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.main-slider-one__tab__bar i {
  display: block;
  height: 100%;
  width: 0;
  background-color: #fff;
}

.main-slider-one__tab.is-active .main-slider-one__tab__bar i {
  animation: fsysProgress var(--slide-time, 9000ms) linear forwards;
}

@keyframes fsysProgress {
  from { width: 0; }
  to { width: 100%; }
}

.main-slider-one__carousel .owl-dots {
  display: none !important;
}

@media (max-width: 1199px) {
  .main-slider-one__title {
    font-size: 48px !important;
  }
}

@media (max-width: 991px) {
  .main-slider-one__item {
    padding: 64px 0 48px;
  }
  .main-slider-one__visual {
    margin-top: 48px;
  }
}

@media (max-width: 767px) {
  .main-slider-one {
    padding: 0 8px 16px;
  }
  .main-slider-one__stage {
    border-radius: 24px;
  }
  .main-slider-one__title {
    font-size: 36px !important;
    line-height: 40px !important;
  }
  .main-slider-one__tab__label {
    display: none;
  }
  .main-slider-one__tabs__list {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-slider-one__glow, .main-slider-one__badge, .hero-panel__pill::before {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Hero refinement: sapphire and amber, market ticker, candle chart
--------------------------------------------------------------*/
:root {
  --fsys-sapphire: #0f2a5a;
  --fsys-sapphire-deep: #0a1f45;
  --fsys-amber: #f4b942;
  --fsys-cream: #f7f1e4;
  --fsys-gain: #3ddc97;
}

.main-slider-one__stage {
  --stage: var(--fsys-sapphire);
  --stage-line: rgba(247, 241, 228, 0.14);
  --stage-text: #c3cee6;
  --stage-muted: #8b9bbd;
  background-color: var(--fsys-sapphire);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 32px 64px rgba(10, 31, 69, 0.22);
}

/* The glows and grid gave it the generic dark look; the chart and ticker replace them */
.main-slider-one__glow, .main-slider-one__grid {
  display: none;
}

/* Deeper band at the foot of the stage where the tabs sit */
.main-slider-one__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background-color: var(--fsys-sapphire-deep);
  z-index: -1;
}

.main-slider-one__ticker {
  overflow: hidden;
  border-bottom: 1px solid rgba(247, 241, 228, 0.12);
  background-color: var(--fsys-sapphire-deep);
  white-space: nowrap;
}

.main-slider-one__ticker__track {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: fsysTicker 60s linear infinite;
}

.main-slider-one__ticker__track li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stage-text);
}

.main-slider-one__ticker__track li i {
  color: var(--fsys-gain);
  font-size: 14px;
}

@keyframes fsysTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.main-slider-one__item {
  padding-top: 80px;
}

/* Warm cream headline with an amber keyword */
.main-slider-one__title {
  background-image: linear-gradient(90deg, #ffffff 30%, var(--fsys-cream));
}

.main-slider-one__title .fsys-accent {
  -webkit-text-fill-color: var(--fsys-amber);
}

.main-slider-one__sub-title {
  background-color: rgba(244, 185, 66, 0.12);
  border-color: rgba(244, 185, 66, 0.32);
  color: var(--fsys-cream);
}

.main-slider-one__sub-title::before {
  background-color: var(--fsys-amber);
  box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.18);
}

.main-slider-one__proof {
  border-top-color: rgba(247, 241, 228, 0.16);
}

.main-slider-one__proof li {
  color: var(--fsys-cream);
}

.main-slider-one__proof li i {
  color: var(--fsys-gain);
}

.main-slider-one__tab__num {
  color: var(--fsys-amber);
}

.main-slider-one__tab__bar i {
  background-color: var(--fsys-amber);
}

/* Paper card with a hairline amber top edge */
.main-slider-one__btn .tolak-btn {
  background-color: var(--fsys-amber);
  color: var(--fsys-sapphire-deep);
  box-shadow: 0 16px 40px rgba(244, 185, 66, 0.3);
}

.main-slider-one__btn .tolak-btn span {
  background-color: #ffd37a;
}

.main-slider-one__btn .tolak-btn:hover {
  color: var(--fsys-sapphire-deep);
}

@media (prefers-reduced-motion: reduce) {
  .main-slider-one__ticker__track {
    animation: none;
  }
}
/* Welcome slide: photo blended into the stage from right to left */
.main-slider-one__item--welcome {
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.main-slider-one__item--welcome > .container {
  position: relative;
  z-index: 1;
}

.main-slider-one__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 68%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 45%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
  mask-image: linear-gradient(to left, #000 45%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
}

.main-slider-one__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1600ms var(--fsys-ease), transform 6000ms var(--fsys-ease);
}

.main-slider-one .active .main-slider-one__photo img {
  opacity: 0.9;
  transform: scale(1);
}

/* Sapphire wash so the photo shares the stage colour */
.main-slider-one__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--fsys-sapphire);
  mix-blend-mode: color;
  opacity: 0.35;
}

.main-slider-one__content--welcome {
  max-width: 680px;
}

/* Tagline lockup: mono kickers, serif "Trust", sans "Financial Innovation", amber stops */
.main-slider-one__title--welcome {
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0;
  margin: 0 0 40px;
  padding-bottom: 8px;
  overflow: visible;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}

.tagline-lockup__row {
  display: block;
}

.tagline-lockup__row + .tagline-lockup__row {
  margin-top: 24px;
}

.tagline-lockup__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fsys-amber);
}

.tagline-lockup__kicker::after {
  content: "";
  width: 48px;
  height: 1px;
  background-color: rgba(244, 185, 66, 0.5);
}

.tagline-lockup__big {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 128px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--fsys-cream);
}

.tagline-lockup__mid {
  display: block;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.tagline-lockup__dot {
  color: var(--fsys-amber);
}

.tagline-lockup__mark {
  position: relative;
  display: inline-block;
}

.tagline-lockup__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.3em;
  bottom: -6px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--fsys-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms var(--fsys-ease);
}

/* Staggered entrance, line by line */
.tagline-lockup__kicker, .tagline-lockup__big, .tagline-lockup__mid {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease);
}

.main-slider-one .active .tagline-lockup__kicker,
.main-slider-one .active .tagline-lockup__big,
.main-slider-one .active .tagline-lockup__mid {
  opacity: 1;
  transform: none;
}

.main-slider-one .active .tagline-lockup__row:first-child .tagline-lockup__kicker { transition-delay: 250ms; }
.main-slider-one .active .tagline-lockup__big { transition-delay: 400ms; }
.main-slider-one .active .tagline-lockup__row--two .tagline-lockup__kicker { transition-delay: 600ms; }
.main-slider-one .active .tagline-lockup__mid { transition-delay: 750ms; }

.main-slider-one .active .tagline-lockup__mark::after {
  transform: scaleX(1);
  transition-delay: 1300ms;
}
/* Tolak colours every span in the slider title blue and adds a 117px bar after it; switch both off */
.main-slider-one .main-slider-one__title span {
  color: inherit;
}

.main-slider-one .main-slider-one__title span::after {
  content: none;
}

.main-slider-one .main-slider-one__title .tagline-lockup__kicker {
  color: var(--fsys-amber);
}

.main-slider-one .main-slider-one__title .tagline-lockup__kicker::after {
  content: "";
  position: static;
  width: 48px;
  height: 1px;
  background-color: rgba(244, 185, 66, 0.5);
}

.main-slider-one .main-slider-one__title .tagline-lockup__big {
  color: var(--fsys-cream);
}

.main-slider-one .main-slider-one__title .tagline-lockup__mid {
  color: #fff;
}

.main-slider-one .main-slider-one__title .tagline-lockup__dot {
  color: var(--fsys-amber);
}

.main-slider-one .main-slider-one__title .tagline-lockup__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.3em;
  bottom: -6px;
  width: auto;
  height: 4px;
  background-color: var(--fsys-amber);
}

/* Screen reader copy of the tagline: the template's "title span { position: relative }" un-hid it */
.main-slider-one .main-slider-one__title .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tagline-lockup {
  display: block;
}

/* Typing animation on the second line */
.tagline-lockup__mid {
  white-space: nowrap;
}

.tagline-lockup__mark.is-typing .tagline-lockup__dot {
  opacity: 0;
}

/* Sub headline typed once under the tagline */
.main-slider-one__subhead {
  position: relative;
  max-width: 600px;
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--fsys-cream);
}

/* Invisible full copy reserves the final height so nothing jumps while typing */
.main-slider-one__subhead__ghost {
  visibility: hidden;
}

.main-slider-one__subhead__typed {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
}

.fsys-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  border-radius: 2px;
  background-color: var(--fsys-amber);
  animation: fsysCaret 1s steps(1) infinite;
  transition: opacity 600ms var(--fsys-ease);
}

.fsys-caret.is-done {
  animation: none;
  opacity: 0;
}

@media (max-width: 767px) {
  .main-slider-one__subhead {
    font-size: 18px;
    line-height: 28px;
  }
}

@keyframes fsysCaret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* The button row clipped the amber button shadow into a dark smear */
.main-slider-one__btn {
  overflow: visible;
}

.main-slider-one__btn .tolak-btn {
  box-shadow: none;
}

@media (max-width: 575px) {
  .tagline-lockup__mid {
    white-space: normal;
    min-height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fsys-caret {
    animation: none;
  }
}
@media (max-width: 1199px) {
  .tagline-lockup__big {
    font-size: 104px;
  }
  .tagline-lockup__mid {
    font-size: 40px;
  }
}

@media (max-width: 991px) {
  .main-slider-one__item--welcome {
    min-height: 0;
  }
  .main-slider-one__photo {
    width: 100%;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.6) 0, transparent 90%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.6) 0, transparent 90%);
  }
}

@media (max-width: 767px) {
  .tagline-lockup__big {
    font-size: 72px;
  }
  .tagline-lockup__mid {
    font-size: 30px;
    line-height: 36px;
  }
  .tagline-lockup__kicker {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.24em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tagline-lockup__kicker, .tagline-lockup__big, .tagline-lockup__mid {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .main-slider-one__photo img {
    transition: none;
    transform: none;
  }
}
/* Full screen, square edged slider */
.main-slider-one {
  --hero-offset: 314px; /* topbar + header + ticker + tab bar + 64px wave */
  padding: 0 !important;
}

.main-slider-one__stage {
  --wave-h: 64px;
  border-radius: 0 !important;
  border: none;
  box-shadow: none;
  padding-bottom: calc(96px + var(--wave-h));
}

/* The tab bar sits just above the wave */
.main-slider-one__stage .main-slider-one__tabs {
  bottom: calc(32px + var(--wave-h));
}

/* Wave edge: two drifting layers in the next section's colour, so the hero flows into it */
.main-slider-one__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--wave-h);
  z-index: 4;
  pointer-events: none;
}

.main-slider-one__wave span {
  position: absolute;
  inset: 0;
  background-color: var(--fsys-surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 8 480 8 720 40S1200 72 1440 40V80H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 1440px 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 8 480 8 720 40S1200 72 1440 40V80H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 1440px 100%;
  animation: fsys-wave-drift 28s linear infinite;
}

/* Back layer: taller, translucent, drifting the other way for depth */
.main-slider-one__wave span:first-child {
  top: -18px;
  opacity: 0.18;
  -webkit-mask-size: 1080px 100%;
  mask-size: 1080px 100%;
  animation: fsys-wave-drift-back 36s linear infinite reverse;
}

/* Each layer drifts exactly one tile width per loop, so the repeat is seamless */
@keyframes fsys-wave-drift {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 1440px 0;
    mask-position: 1440px 0;
  }
}

@keyframes fsys-wave-drift-back {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 1080px 0;
    mask-position: 1080px 0;
  }
}

@media (max-width: 767px) {
  .main-slider-one__stage {
    --wave-h: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-slider-one__wave span {
    animation: none;
  }
}

.main-slider-one__item,
.main-slider-one__item--welcome {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--hero-offset));
  min-height: calc(100svh - var(--hero-offset));
}

.main-slider-one__item > .container {
  width: 100%;
}

@media (max-width: 991px) {
  .main-slider-one__item,
  .main-slider-one__item--welcome {
    min-height: 0;
  }
}
/* Photo layer shared by slides: image on the right, faded into the text on the left */
.main-slider-one__item--photo {
  position: relative;
  overflow: hidden;
}

.main-slider-one__item--photo > .container {
  position: relative;
  z-index: 1;
}

.main-slider-one__photo--center img {
  object-position: center center;
}

/* Slide 2 hook: "Don't Just Compete in the Market. Lead It." */
.main-slider-one__title--hook {
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0;
  margin: 0 0 32px;
  padding-bottom: 8px;
  overflow: visible;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}

.main-slider-one .main-slider-one__title .hook-lockup__lead {
  display: block;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--stage-text);
}

.main-slider-one .main-slider-one__title .hook-lockup__strike {
  position: relative;
  display: inline-block;
  color: var(--fsys-cream);
}

.main-slider-one .main-slider-one__title .hook-lockup__big {
  display: block;
  margin-top: 8px;
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 128px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fsys-cream);
}

.hook-lockup__lead, .hook-lockup__big {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease);
}

.main-slider-one .active .hook-lockup__lead,
.main-slider-one .active .hook-lockup__big {
  opacity: 1;
  transform: none;
}

.main-slider-one .active .hook-lockup__lead { transition-delay: 250ms; }
.main-slider-one .active .hook-lockup__big { transition-delay: 500ms; }

.main-slider-one__subhead--hook {
  margin-bottom: 24px;
}

/* Highlighted closing: "Your ambition. Our engineering. A stronger market position." */
.hook-closing {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(244, 185, 66, 0.32);
  background-color: rgba(10, 31, 69, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 16px;
  line-height: 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease);
}

.main-slider-one .active .hook-closing {
  opacity: 1;
  transform: none;
  transition-delay: 800ms;
}

.hook-closing__part {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  color: var(--fsys-cream);
}

.hook-closing__part:not(:last-child)::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--fsys-amber);
}

/* The key phrase gets a marker highlight that sweeps in */
.hook-closing__part--key {
  font-weight: 700;
  color: var(--fsys-cream);
  padding: 2px 8px;
  border-radius: 6px;
  background-image: linear-gradient(var(--fsys-amber), var(--fsys-amber));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 900ms var(--fsys-ease), color 600ms var(--fsys-ease);
}

.main-slider-one .active .hook-closing__part--key {
  background-size: 100% 100%;
  color: var(--fsys-sapphire-deep);
  transition-delay: 1500ms;
}

@media (max-width: 1199px) {
  .main-slider-one .main-slider-one__title .hook-lockup__big {
    font-size: 104px;
  }
}

@media (max-width: 767px) {
  .main-slider-one .main-slider-one__title .hook-lockup__lead {
    font-size: 24px;
    line-height: 32px;
  }
  .main-slider-one .main-slider-one__title .hook-lockup__big {
    font-size: 72px;
  }
  .hook-closing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .hook-closing__part:not(:last-child)::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hook-lockup__lead, .hook-lockup__big, .hook-closing {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hook-closing__part--key {
    background-size: 100% 100%;
    color: var(--fsys-sapphire-deep);
    transition: none;
  }
}
/*--------------------------------------------------------------
# Slide 3: Shariah-based trading (midnight, gold, electric blue)
--------------------------------------------------------------*/
.main-slider-one__item--islamic {
  --gold: #d6b46a;
  --gold-light: #f1dfae;
  --electric: #4cc3ff;
  --midnight: #060d1f;
  position: relative;
  overflow: hidden;
  /* Same sapphire family as the other slides, a shade deeper, with a blue glow behind the medallion */
  background-color: #0a1f45;
  background-image: radial-gradient(ellipse 55% 75% at 78% 50%, rgba(44, 95, 236, 0.32), transparent 70%), linear-gradient(90deg, #081a3b 0%, #0b2149 55%, #0a1f45 100%);
}

.main-slider-one__item--islamic > .container {
  position: relative;
  z-index: 1;
}

/* Gold girih lattice across the slide, strongest behind the medallion */
.islamic-slide__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 80% 50%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 100% at 80% 50%, #000 15%, transparent 80%);
}

/* Eight point star medallion with circuit traces and a rising market line */
.islamic-slide__medallion {
  position: absolute;
  top: 50%;
  right: -96px;
  width: min(720px, 58vw);
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.94) rotate(-6deg);
  transition: opacity 1400ms var(--fsys-ease), transform 1800ms var(--fsys-ease);
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
  mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}

.main-slider-one .active .islamic-slide__medallion {
  opacity: 0.9;
  transform: translateY(-50%) scale(1) rotate(0);
  transition-delay: 200ms;
}

.islamic-slide__gold, .islamic-slide__gold rect, .islamic-slide__gold circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
}

.islamic-slide__star {
  opacity: 0.75;
  transform-box: view-box;
  transform-origin: 300px 300px;
  animation: islamicSpin 140s linear infinite;
}

.islamic-slide__star-inner {
  opacity: 0.45;
  transform-box: view-box;
  transform-origin: 300px 300px;
  animation: islamicSpin 110s linear infinite reverse;
}

.islamic-slide__ring-dash {
  fill: none;
  stroke: var(--electric);
  stroke-width: 1.5;
  stroke-dasharray: 2 10;
  opacity: 0.6;
  transform-box: view-box;
  transform-origin: 300px 300px;
  animation: islamicSpin 80s linear infinite;
}

.islamic-slide__circuit path {
  fill: none;
  stroke: var(--electric);
  stroke-width: 1.5;
  opacity: 0.65;
}

.islamic-slide__nodes circle {
  fill: var(--electric);
  animation: fsysPulse 2.4s var(--fsys-ease) infinite;
}

.islamic-slide__nodes circle:nth-child(2n) {
  animation-delay: -1.2s;
}

.islamic-slide__chart {
  fill: none;
  stroke: var(--electric);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.islamic-slide__chart-dot {
  fill: var(--gold);
  stroke: var(--midnight);
  stroke-width: 3;
}

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

/* Text */
.main-slider-one__sub-title.islamic-slide__eyebrow {
  background-color: rgba(214, 180, 106, 0.1);
  border-color: rgba(214, 180, 106, 0.38);
  color: var(--gold-light);
}

.main-slider-one__sub-title.islamic-slide__eyebrow::before {
  background-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(214, 180, 106, 0.18);
}

.islamic-slide__title {
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0;
  margin: 0 0 24px;
  overflow: visible;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}

.main-slider-one .main-slider-one__title .islamic-slide__title-lead {
  display: block;
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #e6ebf5;
}

.main-slider-one .main-slider-one__title .islamic-slide__title-key {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold);
}

.islamic-slide__sub {
  max-width: 560px;
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: #b4bfd6;
}

/* Four differentiators as glass cards in front of the medallion */
.islamic-slide__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.islamic-slide__feature {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(214, 180, 106, 0.22);
  background-color: rgba(6, 13, 31, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 600ms var(--fsys-ease), transform 600ms var(--fsys-ease), opacity 900ms var(--fsys-ease);
}

.islamic-slide__feature:hover {
  border-color: rgba(76, 195, 255, 0.55);
  transform: translateY(-2px);
}

.islamic-slide__feature__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--gold);
  background-color: rgba(214, 180, 106, 0.12);
}

.islamic-slide__feature__title {
  margin: 12px 0 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
}

.islamic-slide__feature__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #9fabc4;
}

/* Strategic message: the client as the pioneer */
.islamic-slide__pioneer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 16px 16px 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(214, 180, 106, 0.45);
  background-color: rgba(214, 180, 106, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.islamic-slide__pioneer__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--midnight);
  background-color: var(--gold);
}

.islamic-slide__pioneer__text {
  flex: 1;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #d3dae8;
}

.islamic-slide__pioneer__text strong {
  display: block;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--gold-light);
}

.islamic-slide__pioneer__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background-color: var(--gold);
  color: var(--midnight);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 500ms var(--fsys-ease), transform 500ms var(--fsys-ease), gap 500ms var(--fsys-ease);
}

.islamic-slide__pioneer__btn:hover {
  background-color: var(--gold-light);
  color: var(--midnight);
  transform: translateY(-2px);
  gap: 12px;
}

.islamic-slide__pioneer__btn:active {
  transform: scale(0.98);
}

/* Entrance, staggered */
.islamic-slide__sub, .islamic-slide__feature, .islamic-slide__pioneer {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease), border-color 600ms var(--fsys-ease);
}

.main-slider-one .active .islamic-slide__sub,
.main-slider-one .active .islamic-slide__feature,
.main-slider-one .active .islamic-slide__pioneer {
  opacity: 1;
  transform: none;
}

.main-slider-one .active .islamic-slide__sub { transition-delay: 700ms; }
.main-slider-one .active .islamic-slide__feature:nth-child(1) { transition-delay: 600ms; }
.main-slider-one .active .islamic-slide__feature:nth-child(2) { transition-delay: 720ms; }
.main-slider-one .active .islamic-slide__feature:nth-child(3) { transition-delay: 840ms; }
.main-slider-one .active .islamic-slide__feature:nth-child(4) { transition-delay: 960ms; }
.main-slider-one .active .islamic-slide__pioneer { transition-delay: 1100ms; }

@media (max-width: 1199px) {
  .main-slider-one .main-slider-one__title .islamic-slide__title-key {
    font-size: 60px;
  }
}

@media (max-width: 991px) {
  .islamic-slide__medallion {
    right: -160px;
    width: 560px;
  }
  .main-slider-one .active .islamic-slide__medallion {
    opacity: 0.3;
  }
}

@media (max-width: 767px) {
  .main-slider-one .main-slider-one__title .islamic-slide__title-lead {
    font-size: 22px;
    line-height: 28px;
  }
  .main-slider-one .main-slider-one__title .islamic-slide__title-key {
    font-size: 44px;
  }
  .islamic-slide__pioneer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 575px) {
  .islamic-slide__features {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .islamic-slide__star, .islamic-slide__star-inner, .islamic-slide__ring-dash, .islamic-slide__nodes circle {
    animation: none;
  }
  .islamic-slide__sub, .islamic-slide__feature, .islamic-slide__pioneer, .islamic-slide__medallion {
    transition: none;
  }
}
/*--------------------------------------------------------------
# Slide 4: mobile investment ecosystem
--------------------------------------------------------------*/
.main-slider-one__item--mobile {
  position: relative;
  overflow: hidden;
}

.mobile-slide__title {
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0;
  margin: 0 0 16px;
  overflow: visible;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}

.main-slider-one .main-slider-one__title .mobile-slide__title-lead {
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--stage-text);
}

.main-slider-one .main-slider-one__title .mobile-slide__title-key {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fsys-cream);
}

.main-slider-one .main-slider-one__title .mobile-slide__title-key .tagline-lockup__dot {
  color: var(--fsys-amber);
}

.mobile-slide__sub {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 24px;
  color: var(--stage-text);
}

.mobile-slide__features-title {
  margin: 0 0 12px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fsys-amber);
}

.mobile-slide__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-slide__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  border: 1px solid rgba(247, 241, 228, 0.14);
  background-color: rgba(10, 31, 69, 0.5);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--fsys-cream);
}

.mobile-slide__features__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--fsys-amber);
  background-color: rgba(244, 185, 66, 0.14);
}

/* Three phones: portfolio behind left, trading terminal in front, market behind right */
.mobile-slide__phones {
  --phone-w: 230px;
  position: relative;
  height: calc(var(--phone-w) * 2.1 + 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-phone {
  --pos: translateX(-50%);
  --rise: 64px;
  position: absolute;
  left: 50%;
  top: 16px;
  width: var(--phone-w);
  height: calc(var(--phone-w) * 2.1);
  padding: 8px;
  border-radius: 40px;
  background-color: #0b1220;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 80px rgba(2, 8, 23, 0.55);
  opacity: 0;
  transform: var(--pos) translateY(var(--rise));
  transition: opacity 1000ms var(--fsys-ease), transform 1200ms var(--fsys-ease);
}

.mobile-phone--center {
  z-index: 3;
}

.mobile-phone--left {
  --pos: translateX(-128%) rotate(-7deg) scale(0.88);
  z-index: 2;
}

.mobile-phone--right {
  --pos: translateX(28%) rotate(7deg) scale(0.88);
  z-index: 2;
}

.main-slider-one .active .mobile-phone {
  --rise: 0px;
  opacity: 1;
}

.main-slider-one .active .mobile-phone--center { transition-delay: 300ms; }
.main-slider-one .active .mobile-phone--left { transition-delay: 500ms; }
.main-slider-one .active .mobile-phone--right { transition-delay: 650ms; }

.mobile-phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  padding: 36px 12px 12px;
  background-color: #f6f8fc;
  color: var(--fsys-ink);
  font-size: 11px;
  line-height: 14px;
}

/* Notch */
.mobile-phone__screen::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 72px;
  height: 18px;
  border-radius: 999px;
  background-color: #0b1220;
  transform: translateX(-50%);
}

/* Mini UI used inside the phone screens */
.m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
}

.m-chip {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 12px;
  font-weight: 700;
  color: var(--fsys-up);
  background-color: var(--fsys-up-soft);
}

.m-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  background-color: var(--tolak-base);
}

.m-label {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fsys-muted);
}

.m-big {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: var(--fsys-ink);
}

.m-small {
  font-size: 10px;
  font-weight: 700;
}

.m-up { color: var(--fsys-up); }
.m-down { color: #d14343; }

.m-card {
  margin: 8px 0;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--fsys-line);
  background-color: #fff;
}

.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #eef1f6;
  font-weight: 700;
}

.m-row small {
  display: block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  color: var(--fsys-muted);
}

.m-spark {
  display: block;
  width: 100%;
  height: 44px;
  margin: 6px 0 2px;
}

.m-spark polyline {
  fill: none;
  stroke: var(--tolak-base);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.m-alloc {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-donut {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.m-donut circle {
  fill: none;
  stroke-width: 6;
}

.m-legend {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.m-legend li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
}

.m-legend i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}

.m-legend b {
  margin-left: auto;
}

.m-depth {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 2px;
  margin: 4px 0 8px;
  padding: 8px;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid var(--fsys-line);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  text-align: center;
}

.m-depth__head {
  font-family: var(--tolak-font);
  font-size: 9px;
  font-weight: 700;
  color: var(--fsys-muted);
}

.m-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 8px;
  padding: 2px;
  border-radius: 8px;
  background-color: #e9eef6;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  color: var(--fsys-muted);
}

.m-seg span {
  padding: 4px 0;
  border-radius: 6px;
}

.m-seg span.is-active {
  background-color: #fff;
  color: var(--fsys-ink);
}

.m-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.m-fields div {
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--fsys-line);
  background-color: #fff;
}

.m-fields b {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
}

.m-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.m-btn {
  padding: 8px 0;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.m-btn--buy { background-color: var(--fsys-up); }
.m-btn--sell { background-color: #d14343; }

.m-candles {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 4px;
}

.m-candles line { stroke-width: 1.5; }
.m-candles .up line { stroke: var(--fsys-up); }
.m-candles .up rect { fill: var(--fsys-up); }
.m-candles .down line { stroke: #d14343; }
.m-candles .down rect { fill: #d14343; }

.m-nav {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid var(--fsys-line);
  font-size: 13px;
  color: var(--fsys-muted);
}

.m-nav .is-active {
  color: var(--tolak-base);
}

/* Bottom hook line */
.mobile-slide__advantage {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 16px 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(244, 185, 66, 0.4);
  background-color: rgba(10, 31, 69, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-slide__advantage__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--fsys-sapphire-deep);
  background-color: var(--fsys-amber);
}

.mobile-slide__advantage__text {
  flex: 1;
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--fsys-cream);
}

.mobile-slide__advantage__text strong {
  font-weight: 700;
  color: var(--fsys-amber);
}

.mobile-slide__advantage__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background-color: var(--fsys-amber);
  color: var(--fsys-sapphire-deep);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 500ms var(--fsys-ease), transform 500ms var(--fsys-ease), gap 500ms var(--fsys-ease);
}

.mobile-slide__advantage__btn:hover {
  background-color: #ffd37a;
  color: var(--fsys-sapphire-deep);
  transform: translateY(-2px);
  gap: 12px;
}

.mobile-slide__advantage__btn:active {
  transform: scale(0.98);
}

/* Entrance for the text side */
.mobile-slide__sub, .mobile-slide__features-title, .mobile-slide__features li, .mobile-slide__advantage {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease);
}

.main-slider-one .active .mobile-slide__sub,
.main-slider-one .active .mobile-slide__features-title,
.main-slider-one .active .mobile-slide__features li,
.main-slider-one .active .mobile-slide__advantage {
  opacity: 1;
  transform: none;
}

.main-slider-one .active .mobile-slide__sub { transition-delay: 500ms; }
.main-slider-one .active .mobile-slide__features-title { transition-delay: 600ms; }
.main-slider-one .active .mobile-slide__features li:nth-child(1) { transition-delay: 650ms; }
.main-slider-one .active .mobile-slide__features li:nth-child(2) { transition-delay: 750ms; }
.main-slider-one .active .mobile-slide__features li:nth-child(3) { transition-delay: 850ms; }
.main-slider-one .active .mobile-slide__features li:nth-child(4) { transition-delay: 950ms; }
.main-slider-one .active .mobile-slide__advantage { transition-delay: 1100ms; }

@media (max-width: 1199px) {
  .mobile-slide__phones {
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -62px;
  }
  .main-slider-one .main-slider-one__title .mobile-slide__title-key {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .mobile-slide__phones {
    transform: scale(0.6);
    transform-origin: top center;
    margin-bottom: -206px;
  }
  .main-slider-one .main-slider-one__title .mobile-slide__title-key {
    font-size: 32px;
  }
  .mobile-slide__features {
    grid-template-columns: 1fr;
  }
  .mobile-slide__advantage {
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-slide__advantage__text {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-phone, .mobile-slide__sub, .mobile-slide__features-title, .mobile-slide__features li, .mobile-slide__advantage {
    transition: none;
  }
}
/*--------------------------------------------------------------
# Trust badges
--------------------------------------------------------------*/
.trust-badges {
  padding: 56px 0 64px;
  background-color: var(--fsys-surface);
}

.trust-badges__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-badges__item {
  position: relative;
  padding: 8px 32px;
  text-align: center;
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease);
  transition-delay: calc(var(--i, 0) * 180ms);
}

/* Hairline dividers between badges */
.trust-badges__item + .trust-badges__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--fsys-line) 20%, var(--fsys-line) 80%, transparent);
}

.trust-badges__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 0 20px;
  border-radius: 50%;
  color: var(--fsys-ink);
  background: radial-gradient(circle at 30% 25%, var(--fsys-surface), var(--fsys-tint) 75%);
  box-shadow: inset 0 0 0 1px rgba(var(--tolak-base-rgb), 0.14), var(--fsys-shadow);
  transition: transform 700ms var(--fsys-ease), box-shadow 700ms var(--fsys-ease);
}

/* Soft halo that settles once the icon has drawn */
.trust-badges__icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(var(--tolak-base-rgb), 0.2);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease);
  transition-delay: calc(var(--i, 0) * 180ms + 2000ms);
}

.trust-badges__icon svg {
  width: 30px;
  height: 30px;
  overflow: visible;
}

.trust-badges__icon__accent {
  stroke: var(--tolak-base);
  stroke-width: 1.75;
}

.trust-badges__item:hover .trust-badges__icon {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(var(--tolak-base-rgb), 0.32), var(--fsys-shadow-lg);
}

.trust-badges__title {
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 6px;
}

.trust-badges__text {
  font-size: 14px;
  line-height: 22px;
  margin: 0;
  color: var(--fsys-muted);
}

/* Scroll-in state: armed by JS so the badges stay visible without it */
.trust-badges__list.is-armed .trust-badges__item {
  opacity: 0;
  transform: translateY(16px);
}

.trust-badges__list.is-armed .trust-badges__icon svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i, 0) * 180ms + 250ms);
}

.trust-badges__list.is-armed .trust-badges__icon .trust-badges__icon__accent {
  transition-duration: 900ms;
  transition-delay: calc(var(--i, 0) * 180ms + 1300ms);
}

/* Hidden again: snap back instantly so the next scroll-in replays cleanly */
.trust-badges__list.is-armed:not(.is-in) .trust-badges__item,
.trust-badges__list.is-armed:not(.is-in) .trust-badges__icon svg > *,
.trust-badges__list.is-armed:not(.is-in) .trust-badges__icon::after {
  transition: none;
}

.trust-badges__list.is-armed.is-in .trust-badges__item {
  opacity: 1;
  transform: none;
}

.trust-badges__list.is-armed.is-in .trust-badges__icon svg > * {
  stroke-dashoffset: 0;
}

.trust-badges__list.is-in .trust-badges__icon::after {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 991px) {
  .trust-badges__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
  .trust-badges__item:nth-child(odd)::before {
    display: none;
  }
}

@media (max-width: 575px) {
  .trust-badges {
    padding: 40px 0 48px;
  }
  .trust-badges__list {
    grid-template-columns: 1fr;
  }
  .trust-badges__item {
    padding: 0 16px;
  }
  .trust-badges__item + .trust-badges__item::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-badges__item, .trust-badges__icon, .trust-badges__icon::after, .trust-badges__icon svg > * {
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Trust bar (feature-four)
--------------------------------------------------------------*/
.feature-four {
  padding: 24px 0 64px;
  background-color: var(--fsys-surface);
}

.feature-four__heading {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--fsys-muted);
  margin: 0 0 24px;
}

.feature-four__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-four__item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 16px !important;
  margin: 0 !important;
  border: 1px solid var(--fsys-line);
  border-radius: 16px;
  background-color: var(--fsys-surface);
  transition: transform 700ms var(--fsys-ease), box-shadow 700ms var(--fsys-ease), border-color 700ms var(--fsys-ease);
}

.feature-four__item::after, .feature-four__item::before {
  display: none;
}

.feature-four__item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--tolak-base-rgb), 0.32);
  box-shadow: var(--fsys-shadow);
}

.feature-four__item__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--fsys-tint);
  color: var(--tolak-base);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.feature-four__item__title {
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}

.feature-four__item__text {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  color: var(--fsys-muted);
}

@media (max-width: 991px) {
  .feature-four__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .feature-four__list {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# About (about-three)
--------------------------------------------------------------*/
.about-three {
  padding: 96px 0 !important;
  background-color: var(--fsys-soft);
}

.about-three__image {
  position: relative;
}

.about-three__image__one img, .about-three__image__two img {
  width: 100%;
  border-radius: 24px;
  background-color: var(--fsys-surface);
  border: 1px solid var(--fsys-line);
}

.about-three__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.about-three__fact {
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 16px;
  border-radius: 16px;
  background-color: var(--fsys-surface);
  border: 1px solid var(--fsys-line);
  box-shadow: var(--fsys-shadow);
}

.about-three__fact::before {
  display: none;
}

.about-three__fact__count {
  color: var(--fsys-ink);
  font-size: 30px;
  line-height: 36px;
  margin: 0 0 4px;
}

.about-three__fact__text {
  color: var(--fsys-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.about-three__content__text {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 32px;
}

.about-three__content__text p {
  margin: 0 0 16px;
}

.about-three__content__text p:first-child {
  color: var(--fsys-ink);
  font-weight: 500;
}

.about-three__content__text p:last-child {
  margin-bottom: 0;
}

.about-three__content__bar {
  display: none;
}

.our-solution__box {
  height: 100%;
  border-radius: 16px;
  padding: 24px;
  background-color: var(--tolak-base);
}

.our-solution__box__icon {
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 16px;
  text-align: left;
}

.our-solution__box__text {
  text-transform: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #fff;
}

.our-solution__list {
  height: 100%;
  margin-left: 0;
  padding: 24px !important;
  border-radius: 16px;
  background-color: var(--fsys-surface);
  border: 1px solid var(--fsys-line);
}

.our-solution__list__title {
  color: var(--fsys-ink) !important;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 8px;
}

.our-solution__list p {
  margin: 0;
  color: var(--tolak-text);
}

.our-solution__list__border {
  display: none;
}

@media (max-width: 991px) {
  .about-three__content {
    margin-top: 48px;
  }
}

/* Homepage title: sans lead-in over a serif key line, revealed on scroll */
.about-three__title {
  max-width: none;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.about-three__title__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.about-three__title__line > span {
  position: relative;
  display: inline-block;
  transition: transform 1000ms var(--fsys-ease), opacity 1000ms var(--fsys-ease);
}

.about-three__title__line--key {
  /* Room for the taller serif above and the swash below the descenders */
  padding-top: 0.06em;
  padding-bottom: 0.3em;
  margin-bottom: -0.15em;
}

.about-three__title__line--key > span {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.25em;
  letter-spacing: -0.025em;
  color: var(--tolak-base);
  background-image: linear-gradient(100deg, var(--fsys-base-deep) 0%, var(--tolak-base) 38%, #8fb0ff 50%, var(--tolak-base) 62%, var(--fsys-base-deep) 100%);
  background-size: 250% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition-delay: 140ms;
}

.about-three__title__swash {
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: 0.28em;
  overflow: visible;
  fill: none;
  stroke: var(--tolak-base);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

.about-three__title.is-armed .about-three__title__line > span {
  opacity: 0;
  transform: translateY(105%);
}

.about-three__title.is-armed .about-three__title__swash path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.about-three__title.is-armed .about-three__title__line--key > span {
  background-position: 100% 0;
}

.about-three__title.is-armed.is-in .about-three__title__line > span {
  opacity: 1;
  transform: none;
}

/* Sheen sweeps across the key line, then the swash draws underneath */
.about-three__title.is-armed.is-in .about-three__title__line--key > span {
  background-position: 0% 0;
  transition: transform 1000ms var(--fsys-ease) 140ms, opacity 1000ms var(--fsys-ease) 140ms, background-position 1800ms cubic-bezier(0.65, 0, 0.35, 1) 500ms;
}

.about-three__title.is-armed.is-in .about-three__title__swash path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1) 900ms;
}

/* Hidden again: snap back instantly so the next scroll-in replays cleanly */
.about-three__title.is-armed:not(.is-in) .about-three__title__line > span,
.about-three__title.is-armed:not(.is-in) .about-three__title__swash path {
  transition: none;
}

@media (max-width: 575px) {
  .about-three__title {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-three__title__line > span, .about-three__title__swash path {
    transition: none !important;
  }
}

/* Homepage: network mesh fills the left side and fades into the section background */
.about-three--mesh {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.about-three__mesh {
  position: absolute;
  inset: 0 auto 0 0;
  width: 56%;
  z-index: -1;
  background-color: #0a1730;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.15) 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.15) 86%, transparent 100%);
}

.about-three__mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}

/* Dim the image so the pillar cards read clearly over it */
.about-three__mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 23, 48, 0.25) 0%, rgba(10, 23, 48, 0.55) 100%);
}

/* Strength pillars: glass cards over the mesh */
.about-three__pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 520px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-three__pillar {
  position: relative;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 60%), rgba(10, 23, 48, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 32px rgba(5, 12, 28, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  /* Hover uses transform; the staggered scroll-in uses translate and opacity */
  transition: transform 700ms var(--fsys-ease), border-color 700ms var(--fsys-ease), opacity 900ms var(--fsys-ease) calc(var(--i, 0) * 140ms), translate 900ms var(--fsys-ease) calc(var(--i, 0) * 140ms);
}

/* Accent hairline along the top edge, widens on hover */
.about-three__pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 32px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, #8fb0ff, rgba(143, 176, 255, 0));
  transition: width 700ms var(--fsys-ease);
}

.about-three__pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(143, 176, 255, 0.4);
}

.about-three__pillar:hover::before {
  width: calc(100% - 36px);
}

.about-three__pillar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.about-three__pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #8fb0ff;
  background-color: rgba(143, 176, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.24);
}

.about-three__pillar__icon svg {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.about-three__pillar__num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: rgba(195, 206, 230, 0.6);
}

.about-three__pillar__title {
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 6px;
}

.about-three__pillar__text {
  margin: 0;
  color: #c3cee6;
  font-size: 13px;
  line-height: 20px;
}

/* Scroll-in: cards rise in turn, then each icon draws */
.about-three__pillars.is-armed .about-three__pillar {
  opacity: 0;
  translate: 0 20px;
}

.about-three__pillars.is-armed .about-three__pillar__icon svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i, 0) * 140ms + 400ms);
}

.about-three__pillars.is-armed.is-in .about-three__pillar {
  opacity: 1;
  translate: none;
}

.about-three__pillars.is-armed.is-in .about-three__pillar__icon svg > * {
  stroke-dashoffset: 0;
}

.about-three__pillars.is-armed:not(.is-in) .about-three__pillar,
.about-three__pillars.is-armed:not(.is-in) .about-three__pillar__icon svg > * {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-three__pillar, .about-three__pillar::before, .about-three__pillar__icon svg > * {
    transition: none !important;
  }
}

@media (max-width: 991px) {
  /* Stacked layout: the mesh sits on top and fades downward instead */
  .about-three--mesh {
    padding-top: 0 !important;
  }
  .about-three__mesh {
    inset: 0 0 auto 0;
    width: 100%;
    height: 560px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
  }
  .about-three--mesh .about-three__image {
    padding-top: 48px;
  }
  /* Cards may run past the faded image, so give them a solid enough base on their own */
  .about-three__pillar {
    background-color: rgba(10, 23, 48, 0.82);
  }
}

@media (max-width: 575px) {
  .about-three__pillars {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .about-three__pillar {
    padding: 16px;
  }
}

/*--------------------------------------------------------------
# Solutions (service-two)
--------------------------------------------------------------*/
.service-two {
  padding: 96px 0 !important;
  background-color: var(--fsys-surface);
}

.service-two__item {
  min-height: 0;
  height: 100%;
  border: 1px solid var(--fsys-line);
  border-radius: 24px;
  background-color: var(--fsys-surface);
  text-align: left !important;
  transition: transform 700ms var(--fsys-ease), box-shadow 700ms var(--fsys-ease), border-color 700ms var(--fsys-ease);
}

.service-two__item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--tolak-base-rgb), 0.32);
  box-shadow: var(--fsys-shadow-lg);
}

.service-two__item__normal__content {
  border: none;
  border-radius: 0;
  padding: 24px;
  background-color: transparent;
}

.service-two__item__normal__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 24px;
  margin: 0 0 16px;
  background-color: var(--fsys-tint);
  color: var(--tolak-base);
}

.service-two__item__normal__icon::after, .service-two__item__normal__icon::before {
  display: none;
}

.service-two__item__normal__title {
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 8px;
}

.service-two__item__normal__text {
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 16px;
}

.service-two__item__normal__image {
  padding: 0 8px 8px;
}

.service-two__item__normal__image img {
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Hover overlay from the template is replaced by the card lift above */
.service-two__item__hover {
  display: none;
}

.service-two__carousel .owl-stage {
  display: flex;
  padding: 8px 0 16px;
}

.service-two__carousel .owl-item {
  display: flex;
}

.service-two__carousel .owl-item .item {
  width: 100%;
}

.service-two__carousel .owl-dots {
  margin-top: 24px !important;
}

.service-two__carousel .owl-dots .owl-dot span {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background-color: rgba(var(--tolak-base-rgb), 0.2);
  border: none;
  margin: 0 4px;
}

.service-two__carousel .owl-dots .owl-dot.active span {
  width: 40px;
  background-color: var(--tolak-base);
}

/*--------------------------------------------------------------
# Solutions (solutions-fsys)
--------------------------------------------------------------*/
.solutions-fsys {
  --sol-navy: #101d32;
  --sol-card: #16263f;
  --sol-line: rgba(255, 255, 255, 0.08);
  --sol-accent: #329bee;
  --sol-accent-rgb: 50, 155, 238;
  --sol-text: #a9b6cc;
  position: relative;
  padding: 112px 0;
  color: var(--sol-text);
  background-color: var(--sol-navy);
  isolation: isolate;
  overflow: hidden;
}

/* Soft accent glow behind the featured card */
.solutions-fsys::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: -1;
  width: 900px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--sol-accent-rgb), 0.16), transparent);
}

.solutions-fsys__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 48px;
  margin-bottom: 48px;
}

.solutions-fsys__kicker {
  display: block;
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sol-accent);
}

.solutions-fsys__title {
  margin: 0;
  color: #fff;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.02em;
}

.solutions-fsys__title span {
  display: block;
  color: var(--sol-accent);
}

.solutions-fsys__intro {
  margin: 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--sol-text);
}

/* Cards: image on top, tag, title, text, link */
.solutions-fsys__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  background-color: var(--sol-card);
  border: 1px solid var(--sol-line);
  transition: transform 700ms var(--fsys-ease), border-color 700ms var(--fsys-ease), box-shadow 700ms var(--fsys-ease), opacity 900ms var(--fsys-ease) calc(var(--i, 0) * 120ms), translate 900ms var(--fsys-ease) calc(var(--i, 0) * 120ms);
}

.solutions-fsys__card:hover, .solutions-fsys__card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(var(--sol-accent-rgb), 0.45);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.solutions-fsys__card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  background-color: #0b1526;
}

.solutions-fsys__card__media img, .solutions-fsys__card__media svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--fsys-ease);
}

/* Fade the bottom of the image into the card */
.solutions-fsys__card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(16, 29, 50, 0.45));
  pointer-events: none;
}

.solutions-fsys__card:hover .solutions-fsys__card__media img,
.solutions-fsys__card:hover .solutions-fsys__card__media svg {
  transform: scale(1.05);
}

.solutions-fsys__card__media--art {
  background: radial-gradient(circle at 80% 50%, rgba(var(--sol-accent-rgb), 0.22), transparent 60%), #0b1526;
}

.solutions-fsys__card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 16px 12px 12px;
}

.solutions-fsys__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6fbaf5;
  background-color: rgba(var(--sol-accent-rgb), 0.14);
}

.solutions-fsys__tag--green {
  color: #3ddc97;
  background-color: rgba(61, 220, 151, 0.12);
}

.solutions-fsys__card__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.solutions-fsys__card__title a {
  color: #fff;
}

.solutions-fsys__card__text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 24px;
  color: var(--sol-text);
}

.solutions-fsys__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--sol-accent);
  transition: gap 500ms var(--fsys-ease), color 500ms var(--fsys-ease);
}

.solutions-fsys__link:hover {
  gap: 12px;
  color: #fff;
}

.solutions-fsys__link i {
  font-size: 12px;
}

/* Featured: wide image above, larger type */
.solutions-fsys__card--featured {
  margin-bottom: 24px;
}

.solutions-fsys__card--featured .solutions-fsys__card__media {
  aspect-ratio: 21 / 8;
}

/* Keep the trading screens in frame when the wide crop trims top and bottom */
.solutions-fsys__card--featured .solutions-fsys__card__media img {
  object-position: 60% 40%;
}

.solutions-fsys__card--featured .solutions-fsys__card__body {
  padding: 24px 20px 20px;
}

.solutions-fsys__card--featured .solutions-fsys__card__title {
  font-size: 28px;
  line-height: 36px;
}

.solutions-fsys__card--featured .solutions-fsys__card__text {
  font-size: 17px;
  line-height: 28px;
  max-width: 920px;
}

/* Portfolio grid: three across, then two wider */
.solutions-fsys__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.solutions-fsys__grid .solutions-fsys__card {
  grid-column: span 2;
}

.solutions-fsys__grid .solutions-fsys__card:nth-child(n + 4) {
  grid-column: span 3;
}

.solutions-fsys__grid .solutions-fsys__card:nth-child(n + 4) .solutions-fsys__card__media {
  aspect-ratio: 16 / 7;
}

/* Explore link slides in on hover where hover exists; always shown on touch */
@media (hover: hover) and (pointer: fine) {
  .solutions-fsys__grid .solutions-fsys__link {
    opacity: 0;
    translate: -8px 0;
    transition: opacity 500ms var(--fsys-ease), translate 500ms var(--fsys-ease), gap 500ms var(--fsys-ease), color 500ms var(--fsys-ease);
  }
  .solutions-fsys__grid .solutions-fsys__card:hover .solutions-fsys__link,
  .solutions-fsys__grid .solutions-fsys__card:focus-within .solutions-fsys__link {
    opacity: 1;
    translate: none;
  }
}

/* Scroll-in */
.solutions-fsys__card--featured.is-armed,
.solutions-fsys__grid.is-armed .solutions-fsys__card {
  opacity: 0;
  translate: 0 24px;
}

.solutions-fsys__card--featured.is-armed.is-in,
.solutions-fsys__grid.is-armed.is-in .solutions-fsys__card {
  opacity: 1;
  translate: none;
}

.solutions-fsys__card--featured.is-armed:not(.is-in),
.solutions-fsys__grid.is-armed:not(.is-in) .solutions-fsys__card {
  transition: none;
}

@media (max-width: 991px) {
  .solutions-fsys {
    padding: 88px 0;
  }
  .solutions-fsys__head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .solutions-fsys__card--featured .solutions-fsys__card__media {
    aspect-ratio: 16 / 8;
  }
  .solutions-fsys__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .solutions-fsys__grid .solutions-fsys__card,
  .solutions-fsys__grid .solutions-fsys__card:nth-child(n + 4) {
    grid-column: span 1;
  }
  .solutions-fsys__grid .solutions-fsys__card:nth-child(n + 4) .solutions-fsys__card__media {
    aspect-ratio: 16 / 10;
  }
  .solutions-fsys__grid .solutions-fsys__card:last-child {
    grid-column: span 2;
  }
  .solutions-fsys__grid .solutions-fsys__card:last-child .solutions-fsys__card__media {
    aspect-ratio: 16 / 7;
  }
}

@media (max-width: 575px) {
  .solutions-fsys {
    padding: 64px 0;
  }
  .solutions-fsys__title {
    font-size: 32px;
    line-height: 38px;
  }
  .solutions-fsys__card--featured .solutions-fsys__card__media {
    aspect-ratio: 16 / 10;
  }
  .solutions-fsys__card--featured .solutions-fsys__card__title {
    font-size: 24px;
    line-height: 30px;
  }
  .solutions-fsys__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .solutions-fsys__grid .solutions-fsys__card:last-child {
    grid-column: auto;
  }
  .solutions-fsys__grid .solutions-fsys__card:last-child .solutions-fsys__card__media {
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-fsys__card, .solutions-fsys__card__media img, .solutions-fsys__card__media svg, .solutions-fsys__link {
    transition: none !important;
  }
}
/*--------------------------------------------------------------
# Tagline reveal
--------------------------------------------------------------*/
.tagline-one {
  padding: 112px 0 96px;
  background-color: var(--fsys-surface);
  text-align: center;
}

.tagline-one__kicker {
  display: inline-block;
  margin: 0 0 24px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tolak-base);
  background-color: var(--fsys-tint);
}

.tagline-one__text {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fsys-ink);
}

/* Second sentence on its own line, the payoff */
.tagline-one__line {
  display: block;
  margin-top: 16px;
}

.tagline-one__serif {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Brokers + exchanges flow into Trade+, which fans out to its capabilities */
.tagline-one__flow {
  max-width: 960px;
  margin: 64px auto 0;
}

/* Map is drawn on a 720 x 250 grid; the four out-lines end at the centres of the four capability columns */
.tagline-one__flow__map {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 250;
}

.tagline-one__flow__map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tagline-one__flow__path {
  fill: none;
  stroke: rgba(var(--tolak-base-rgb), 0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Streams: short dashes flowing along each connector toward its destination */
.tagline-one__flow__stream {
  --c: var(--tolak-base-rgb);
  fill: none;
  stroke: rgb(var(--c));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.06 0.1;
  animation: fsys-flow-stream 1.6s linear infinite;
  transition: opacity 600ms var(--fsys-ease) 1300ms;
}

@keyframes fsys-flow-stream {
  from {
    stroke-dashoffset: 0.16;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.tagline-one__node, .tagline-one__hub {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  transition: opacity 800ms var(--fsys-ease), translate 800ms var(--fsys-ease);
}

.tagline-one__node {
  top: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 12px;
  background-color: var(--fsys-surface);
  border: 1px solid var(--fsys-line);
  box-shadow: var(--fsys-shadow);
}

.tagline-one__node--brokers {
  left: 27.8%;
}

.tagline-one__node--exchanges {
  left: 72.2%;
  transition-delay: 120ms;
}

.tagline-one__node b {
  font-size: 15px;
  line-height: 20px;
  color: var(--fsys-ink);
}

.tagline-one__node small {
  font-size: 11px;
  line-height: 14px;
  color: var(--fsys-muted);
}

.tagline-one__hub {
  top: 52.4%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: #fff;
  background-color: var(--fsys-ink);
  box-shadow: 0 0 0 6px rgba(var(--tolak-base-rgb), 0.12), 0 16px 32px rgba(11, 27, 51, 0.2);
  transition-delay: 900ms;
}

.tagline-one__hub img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.tagline-one__flow__path--out {
  stroke: rgba(var(--tolak-base-rgb), 0.2);
}

.tagline-one__flow__stream--out {
  stroke-width: 2;
  animation-duration: 2.2s;
  transition-delay: 2100ms;
}

/* Capabilities: four columns whose centres sit under the out-lines */
.tagline-one__caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* Each card carries its own hue (--c as an RGB triplet) */
.tagline-one__caps li {
  --c: var(--tolak-base-rgb);
  position: relative;
  padding: 20px;
  border-radius: 14px;
  overflow: visible;
  background: linear-gradient(160deg, rgba(var(--c), 0.09) 0%, rgba(var(--c), 0.02) 55%, transparent 100%), var(--fsys-surface);
  border: 1px solid rgba(var(--c), 0.18);
  box-shadow: var(--fsys-shadow);
  transition: transform 700ms var(--fsys-ease), border-color 700ms var(--fsys-ease), box-shadow 700ms var(--fsys-ease), opacity 900ms var(--fsys-ease) calc(var(--i, 0) * 120ms + 1300ms), translate 900ms var(--fsys-ease) calc(var(--i, 0) * 120ms + 1300ms);
}

/* Small connector dot where the line lands */
.tagline-one__caps li::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background-color: var(--fsys-surface);
  border: 2px solid rgb(var(--c));
}

/* Coloured accent along the top edge */
.tagline-one__caps li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, rgba(var(--c), 0), rgb(var(--c)) 50%, rgba(var(--c), 0));
  opacity: 0.7;
  transition: opacity 500ms var(--fsys-ease);
}

.tagline-one__caps li:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--c), 0.4);
  box-shadow: 0 2px 4px rgba(var(--c), 0.06), 0 20px 40px rgba(var(--c), 0.14);
}

.tagline-one__caps li:hover::after {
  opacity: 1;
}

.tagline-one__caps__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 10px;
  color: rgb(var(--c));
  background-color: rgba(var(--c), 0.12);
  transition: color 500ms var(--fsys-ease), background-color 500ms var(--fsys-ease);
}

.tagline-one__caps li:hover .tagline-one__caps__icon {
  color: #fff;
  background-color: rgb(var(--c));
}

.tagline-one__caps__icon svg {
  width: 22px;
  height: 22px;
}

.tagline-one__caps b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 22px;
  color: var(--fsys-ink);
}

.tagline-one__caps small {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--fsys-muted);
}

/* Scroll-in: inputs appear, lines draw into the hub, the hub lands, lines fan out, then the capabilities rise */
.tagline-one__flow.is-armed .tagline-one__node,
.tagline-one__flow.is-armed .tagline-one__hub,
.tagline-one__flow.is-armed .tagline-one__caps li {
  opacity: 0;
  translate: 0 12px;
}

.tagline-one__flow.is-armed .tagline-one__flow__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1000ms cubic-bezier(0.65, 0, 0.35, 1) 300ms;
}

.tagline-one__flow.is-armed .tagline-one__flow__path--out {
  transition-delay: 1000ms;
}

.tagline-one__flow.is-armed .tagline-one__flow__stream {
  opacity: 0;
}

.tagline-one__flow.is-armed.is-in .tagline-one__node,
.tagline-one__flow.is-armed.is-in .tagline-one__hub,
.tagline-one__flow.is-armed.is-in .tagline-one__caps li {
  opacity: 1;
  translate: none;
}

.tagline-one__flow.is-armed.is-in .tagline-one__flow__path {
  stroke-dashoffset: 0;
}

.tagline-one__flow.is-armed.is-in .tagline-one__flow__stream {
  opacity: 1;
}

.tagline-one__flow.is-armed:not(.is-in) * {
  transition: none;
}

@media (max-width: 767px) {
  /* Capabilities stack 2 x 2, so the fan-out lines no longer line up; the map ends at the hub */
  .tagline-one__flow__map {
    aspect-ratio: 720 / 180;
  }
  .tagline-one__flow__map > svg {
    height: 138.9%;
  }
  .tagline-one__flow__path--out, .tagline-one__flow__stream--out {
    display: none;
  }
  .tagline-one__node {
    top: 16.7%;
  }
  .tagline-one__hub {
    top: 72.8%;
  }
  .tagline-one__caps {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
  }
  .tagline-one__caps li::before {
    display: none;
  }
}

@media (max-width: 575px) {
  .tagline-one__node {
    padding: 6px 10px;
  }
  .tagline-one__node b {
    font-size: 13px;
  }
  .tagline-one__node small {
    display: none;
  }
  .tagline-one__hub {
    padding: 8px 14px;
    font-size: 13px;
  }
  .tagline-one__caps li {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tagline-one__flow__stream {
    animation: none;
  }
}

.tagline-one__word {
  color: rgba(var(--tolak-black-rgb), 0.28);
  transition: color 800ms var(--fsys-ease);
}

.tagline-one__word.is-lit {
  color: var(--fsys-ink);
}

.tagline-one__word.is-accent.is-lit {
  color: var(--tolak-base);
}

@media (max-width: 767px) {
  .tagline-one {
    padding: 64px 0;
  }
  .tagline-one__text {
    font-size: 28px;
    line-height: 36px;
  }
  .tagline-one__flow {
    margin-top: 40px;
  }
}

/*--------------------------------------------------------------
# OMS (why-choose-one)
--------------------------------------------------------------*/
.why-choose-one {
  padding: 96px 0 !important;
  background-image: none !important;
  background-color: var(--fsys-soft);
}

.why-choose-one__content .sec-title-two__title {
  color: var(--fsys-ink);
}

.why-choose-one__content__text {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 32px;
  max-width: 640px;
}

.why-choose-one__item {
  height: 100%;
  align-items: flex-start;
  gap: 16px;
  padding: 24px !important;
  border: 1px solid var(--fsys-line);
  border-radius: 16px;
  background-color: var(--fsys-surface);
  overflow: hidden;
  transition: transform 700ms var(--fsys-ease), box-shadow 700ms var(--fsys-ease), border-color 700ms var(--fsys-ease);
}

.why-choose-one__item::after, .why-choose-one__item::before {
  display: none;
}

.why-choose-one__item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--tolak-base-rgb), 0.32);
  box-shadow: var(--fsys-shadow);
}

.why-choose-one__item__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 24px;
  justify-content: center;
  background-color: var(--fsys-tint);
  color: var(--tolak-base);
}

.why-choose-one__item__title {
  font-size: 18px;
  line-height: 28px;
  color: var(--fsys-ink);
  margin: 0 0 4px;
}

.why-choose-one__item__text {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  color: var(--tolak-text);
}

.why-choose-one__image {
  position: sticky;
  top: 120px;
}

.why-choose-one__image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 8px solid var(--fsys-surface);
  box-shadow: var(--fsys-shadow-lg);
}

.why-choose-one__btn {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

@media (max-width: 1199px) {
  .why-choose-one__image {
    position: relative;
    top: 0;
    margin-top: 48px;
  }
}

/*--------------------------------------------------------------
# OMS (oms-fsys): centred heading, live monitor, feature grid, closing statement
--------------------------------------------------------------*/
@property --oms-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.oms-fsys {
  --oms-bg: #060d1f;
  --oms-card: rgba(255, 255, 255, 0.03);
  --oms-line: rgba(255, 255, 255, 0.09);
  --oms-text: #a9b6cc;
  --oms-muted: #7d8aa6;
  --oms-electric: #4cc3ff;
  --oms-electric-rgb: 76, 195, 255;
  --oms-gold: #d6b46a;
  --oms-gold-light: #f1dfae;
  position: relative;
  padding: 120px 0 112px;
  color: var(--oms-text);
  text-align: center;
  background-color: var(--oms-bg);
  background-image: radial-gradient(60% 40% at 50% 0%, rgba(var(--tolak-base-rgb), 0.28), transparent 70%), radial-gradient(40% 30% at 50% 46%, rgba(var(--oms-electric-rgb), 0.12), transparent 70%);
  isolation: isolate;
  overflow: hidden;
}

/* Heading */
.oms-fsys__head {
  max-width: 920px;
  margin: 0 auto;
}

.oms-fsys__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--oms-electric-rgb), 0.3);
  background-color: rgba(var(--oms-electric-rgb), 0.08);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oms-electric);
  overflow: hidden;
}

/* Light sweeping across the pill */
.oms-fsys__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  translate: -100% 0;
  animation: oms-shimmer 4s var(--fsys-ease) infinite 1.5s;
}

@keyframes oms-shimmer {
  0%, 60% {
    translate: -100% 0;
  }
  100% {
    translate: 100% 0;
  }
}

.oms-fsys__pill__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--fsys-gain);
}

.oms-fsys__pill__dot::after, .oms-fsys__live i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  animation: oms-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes oms-ping {
  75%, 100% {
    transform: scale(3);
    opacity: 0;
  }
}

.oms-fsys__title {
  margin: 0;
  color: #fff;
  font-size: 52px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.oms-fsys__title__accent {
  background-image: linear-gradient(90deg, #7aa2ff, var(--oms-electric), #9d8bff, #7aa2ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oms-gradient-pan 8s linear infinite;
}

@keyframes oms-gradient-pan {
  to {
    background-position: 300% 0;
  }
}

.oms-fsys__highlight {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 28px 0 0;
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.oms-fsys__highlight span {
  display: inline-block;
  transition: opacity 800ms var(--fsys-ease) calc(500ms + var(--i) * 160ms), translate 800ms var(--fsys-ease) calc(500ms + var(--i) * 160ms), filter 800ms var(--fsys-ease) calc(500ms + var(--i) * 160ms);
}

.oms-fsys__highlight__serif {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  background-image: linear-gradient(90deg, var(--oms-gold), var(--oms-gold-light), var(--oms-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.oms-fsys__subtitle {
  max-width: 720px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 30px;
  color: var(--oms-text);
}

/* Monitor */
.oms-fsys__stage {
  position: relative;
  max-width: 1040px;
  margin: 72px auto 0;
  perspective: 1800px;
}

/* Glow pooled behind the screen */
.oms-fsys__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: -1;
  width: 110%;
  height: 80%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(var(--tolak-base-rgb), 0.45), rgba(var(--oms-electric-rgb), 0.12) 60%, transparent);
  filter: blur(20px);
  animation: oms-breathe 6s ease-in-out infinite;
}

@keyframes oms-breathe {
  50% {
    opacity: 0.6;
    scale: 0.95;
  }
}

.oms-fsys__monitor {
  position: relative;
  padding: 14px 14px 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #1b2a45, #0d1729);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform-origin: 50% 100%;
}

/* Rotating light running round the bezel */
.oms-fsys__monitor::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 21px;
  padding: 1px;
  background: conic-gradient(from var(--oms-angle), transparent 0 70%, var(--oms-electric) 85%, #fff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: oms-spin 6s linear infinite;
}

@keyframes oms-spin {
  to {
    --oms-angle: 360deg;
  }
}

.oms-fsys__screen {
  position: relative;
  aspect-ratio: 1200 / 885;
  border-radius: 8px;
  background-color: #050a16;
  overflow: hidden;
}

.oms-fsys__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Faint scan band rolling down the screen */
.oms-fsys__screen__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(var(--oms-electric-rgb), 0.08) 50%, transparent);
  background-size: 100% 30%;
  background-repeat: no-repeat;
  animation: oms-scan 5s linear infinite;
  pointer-events: none;
}

@keyframes oms-scan {
  from {
    background-position: 0 -40%;
  }
  to {
    background-position: 0 140%;
  }
}

/* Glass glare that sweeps once as the screen powers on */
.oms-fsys__screen__glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.14) 48%, transparent 60%);
  translate: -100% 0;
  pointer-events: none;
}

.oms-fsys__monitor__chin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.oms-fsys__monitor__chin img {
  opacity: 0.8;
}

.oms-fsys__live {
  position: absolute;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oms-muted);
}

.oms-fsys__live i {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff5a5a;
}

.oms-fsys__monitor__neck {
  width: 16%;
  height: 56px;
  margin: 0 auto;
  background: linear-gradient(90deg, #0e1a2f, #22355a 50%, #0e1a2f);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.oms-fsys__monitor__base {
  width: 34%;
  height: 12px;
  margin: 0 auto;
  border-radius: 6px 6px 50% 50% / 6px 6px 100% 100%;
  background: linear-gradient(180deg, #2a3f66, #0e1a2f);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* Floating facts around the monitor */
.oms-fsys__float {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--oms-line);
  background-color: rgba(13, 23, 41, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  text-align: left;
  animation: oms-float 7s ease-in-out infinite;
}

.oms-fsys__float b {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #fff;
}

.oms-fsys__float small {
  font-size: 12px;
  line-height: 16px;
  color: var(--oms-electric);
}

.oms-fsys__float--a {
  left: -64px;
  top: 14%;
}

.oms-fsys__float--b {
  right: -56px;
  top: 30%;
  animation-delay: -2.3s;
}

.oms-fsys__float--c {
  left: -32px;
  top: 62%;
  animation-delay: -4.6s;
}

@keyframes oms-float {
  50% {
    transform: translateY(-12px);
  }
}

/* Features */
.oms-fsys__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 96px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.oms-fsys__feature {
  --mx: 50%;
  --my: 0%;
  position: relative;
  padding: 32px 28px 30px;
  border-radius: 18px;
  border: 1px solid var(--oms-line);
  background-color: var(--oms-card);
  overflow: hidden;
  transition: transform 600ms var(--fsys-ease), background-color 600ms var(--fsys-ease), opacity 900ms var(--fsys-ease) calc(var(--i) * 110ms), translate 900ms var(--fsys-ease) calc(var(--i) * 110ms);
}

/* Spotlight that follows the pointer, plus a matching lit border */
.oms-fsys__feature::before, .oms-fsys__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 500ms var(--fsys-ease);
  pointer-events: none;
}

.oms-fsys__feature::before {
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(var(--oms-electric-rgb), 0.12), transparent 60%);
}

.oms-fsys__feature::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--oms-electric-rgb), 0.9), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.oms-fsys__feature:hover {
  transform: translateY(-6px);
  background-color: rgba(255, 255, 255, 0.05);
}

.oms-fsys__feature:hover::before, .oms-fsys__feature:hover::after {
  opacity: 1;
}

.oms-fsys__feature__no {
  position: absolute;
  right: 24px;
  top: 18px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 44px;
  line-height: 1;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  transition: -webkit-text-stroke-color 500ms var(--fsys-ease);
}

.oms-fsys__feature:hover .oms-fsys__feature__no {
  -webkit-text-stroke-color: rgba(var(--oms-electric-rgb), 0.6);
}

.oms-fsys__feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border-radius: 12px;
  border: 1px solid rgba(var(--oms-electric-rgb), 0.25);
  background: linear-gradient(135deg, rgba(var(--tolak-base-rgb), 0.35), rgba(var(--oms-electric-rgb), 0.1));
  color: var(--oms-electric);
  transition: transform 600ms var(--fsys-ease), box-shadow 600ms var(--fsys-ease);
}

.oms-fsys__feature__icon svg {
  width: 24px;
  height: 24px;
}

.oms-fsys__feature:hover .oms-fsys__feature__icon {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 0 24px rgba(var(--oms-electric-rgb), 0.35);
}

.oms-fsys__feature__title {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 27px;
  color: #fff;
}

.oms-fsys__feature__text {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--oms-text);
}

/* Closing statement */
.oms-fsys__close {
  position: relative;
  max-width: 880px;
  margin: 104px auto 0;
  padding-top: 64px;
}

/* Divider that draws out from the centre */
.oms-fsys__close::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--oms-electric-rgb), 0.7), transparent);
  transition: scale 1200ms var(--fsys-ease);
}

.oms-fsys__close__title {
  margin: 0;
  color: #fff;
  font-size: 44px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.oms-fsys__close__title span {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  background-image: linear-gradient(90deg, var(--oms-gold), var(--oms-gold-light), var(--oms-electric), var(--oms-gold));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oms-gradient-pan 10s linear infinite;
}

.oms-fsys__close__text {
  max-width: 640px;
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 30px;
}

.oms-fsys__close__sign {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.oms-fsys__close__sign span {
  color: var(--oms-gold);
}

.oms-fsys__btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* Scroll-in choreography (index.js adds is-armed, then is-in while in view) */
.oms-fsys__head.is-armed > *, .oms-fsys__close.is-armed > * {
  opacity: 0;
  translate: 0 24px;
  filter: blur(8px);
  transition: opacity 900ms var(--fsys-ease), translate 900ms var(--fsys-ease), filter 900ms var(--fsys-ease);
}

.oms-fsys__head.is-armed > :nth-child(2), .oms-fsys__close.is-armed > :nth-child(2) {
  transition-delay: 150ms;
}

.oms-fsys__head.is-armed > :nth-child(3), .oms-fsys__close.is-armed > :nth-child(3) {
  transition-delay: 300ms;
}

.oms-fsys__head.is-armed > :nth-child(4), .oms-fsys__close.is-armed > :nth-child(4) {
  transition-delay: 1100ms;
}

/* The highlight line animates word by word instead of as a block */
.oms-fsys__head.is-armed .oms-fsys__highlight {
  opacity: 1;
  translate: none;
  filter: none;
}

.oms-fsys__head.is-armed .oms-fsys__highlight span {
  opacity: 0;
  translate: 0 70%;
  filter: blur(6px);
}

.oms-fsys__close.is-armed::before {
  scale: 0 1;
}

.oms-fsys__head.is-armed.is-in > *, .oms-fsys__close.is-armed.is-in > *,
.oms-fsys__head.is-armed.is-in .oms-fsys__highlight span {
  opacity: 1;
  translate: none;
  filter: none;
}

.oms-fsys__close.is-armed.is-in::before {
  scale: 1 1;
}

/* Monitor tilts up from the desk and the screen powers on */
.oms-fsys__stage.is-armed .oms-fsys__monitor {
  opacity: 0;
  transform: rotateX(28deg) translateY(80px) scale(0.9);
  transition: opacity 1000ms var(--fsys-ease), transform 1600ms var(--fsys-ease);
}

.oms-fsys__stage.is-armed .oms-fsys__screen img {
  opacity: 0;
  filter: brightness(2.2) saturate(0);
  transition: opacity 700ms ease 700ms, filter 1200ms ease 700ms;
}

.oms-fsys__stage.is-armed .oms-fsys__monitor__neck, .oms-fsys__stage.is-armed .oms-fsys__monitor__base {
  opacity: 0;
  transition: opacity 800ms var(--fsys-ease) 400ms;
}

.oms-fsys__stage.is-armed .oms-fsys__float {
  opacity: 0;
  scale: 0.85;
  transition: opacity 700ms var(--fsys-ease), scale 700ms var(--fsys-ease);
}

.oms-fsys__stage.is-armed .oms-fsys__float--a {
  transition-delay: 1300ms;
}

.oms-fsys__stage.is-armed .oms-fsys__float--b {
  transition-delay: 1500ms;
}

.oms-fsys__stage.is-armed .oms-fsys__float--c {
  transition-delay: 1700ms;
}

.oms-fsys__stage.is-armed.is-in .oms-fsys__monitor {
  opacity: 1;
  transform: none;
}

.oms-fsys__stage.is-armed.is-in .oms-fsys__screen img {
  opacity: 1;
  filter: none;
}

.oms-fsys__stage.is-armed.is-in .oms-fsys__monitor__neck, .oms-fsys__stage.is-armed.is-in .oms-fsys__monitor__base,
.oms-fsys__stage.is-armed.is-in .oms-fsys__float {
  opacity: 1;
  scale: none;
}

.oms-fsys__stage.is-armed.is-in .oms-fsys__screen__glare {
  translate: 100% 0;
  transition: translate 1400ms var(--fsys-ease) 1100ms;
}

.oms-fsys__features.is-armed .oms-fsys__feature {
  opacity: 0;
  translate: 0 32px;
}

.oms-fsys__features.is-armed.is-in .oms-fsys__feature {
  opacity: 1;
  translate: none;
}

.oms-fsys .is-armed:not(.is-in) *, .oms-fsys .is-armed:not(.is-in)::before {
  transition: none;
}

@media (max-width: 1199px) {
  .oms-fsys__title {
    font-size: 44px;
  }
  .oms-fsys__float--a, .oms-fsys__float--c {
    left: -16px;
  }
  .oms-fsys__float--b {
    right: -16px;
  }
}

@media (max-width: 991px) {
  .oms-fsys__features {
    grid-template-columns: repeat(2, 1fr);
  }
  .oms-fsys__float {
    display: none;
  }
  .oms-fsys__close__title {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .oms-fsys {
    padding: 72px 0;
  }
  .oms-fsys__title {
    font-size: 32px;
  }
  .oms-fsys__highlight {
    font-size: 20px;
    line-height: 28px;
    gap: 2px 10px;
  }
  .oms-fsys__subtitle, .oms-fsys__close__text {
    font-size: 16px;
    line-height: 26px;
  }
  .oms-fsys__stage {
    margin-top: 48px;
  }
  .oms-fsys__monitor {
    padding: 8px 8px 0;
    border-radius: 14px;
  }
  .oms-fsys__monitor::before {
    border-radius: 15px;
  }
  .oms-fsys__monitor__chin {
    height: 28px;
  }
  .oms-fsys__monitor__neck {
    height: 32px;
  }
  .oms-fsys__features {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 64px;
  }
  .oms-fsys__feature {
    padding: 24px 20px;
  }
  .oms-fsys__close {
    margin-top: 72px;
    padding-top: 48px;
  }
  .oms-fsys__close__title {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oms-fsys__pill::after, .oms-fsys__pill__dot::after, .oms-fsys__live i::after,
  .oms-fsys__title__accent, .oms-fsys__close__title span, .oms-fsys__stage::before, .oms-fsys__monitor::before,
  .oms-fsys__screen__scan, .oms-fsys__float {
    animation: none;
  }
}

/*--------------------------------------------------------------
# How it works (process-one)
--------------------------------------------------------------*/
.process-one {
  padding: 96px 0;
  background-color: var(--fsys-surface);
}

.process-one__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: fsys-step;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-one__item {
  position: relative;
  padding: 24px;
  border: 1px solid var(--fsys-line);
  border-radius: 24px;
  background-color: var(--fsys-surface);
  counter-increment: fsys-step;
}

.process-one__item::before {
  content: "0" counter(fsys-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--tolak-base);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 24px;
}

.process-one__item::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 80px;
  right: -24px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--fsys-line) 50%, transparent 50%);
  background-size: 8px 1px;
}

.process-one__item:last-child::after {
  display: none;
}

.process-one__item__title {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 8px;
}

.process-one__item__text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

@media (max-width: 991px) {
  .process-one__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-one__item::after {
    display: none;
  }
}

@media (max-width: 575px) {
  .process-one__list {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Security and risk (security-one)
--------------------------------------------------------------*/
.security-one {
  padding: 96px 0;
  background-color: var(--fsys-soft);
}

.security-one__intro {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 32px;
}

.security-one__panel {
  background-color: var(--fsys-surface);
  border: 1px solid var(--fsys-line);
  border-radius: 24px;
  padding: 8px;
  box-shadow: var(--fsys-shadow);
}

.security-one__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.security-one__item {
  padding: 24px;
  border-radius: 16px;
  background-color: var(--fsys-soft);
  transition: background-color 700ms var(--fsys-ease);
}

.security-one__item:hover {
  background-color: var(--fsys-tint);
}

.security-one__item__icon {
  font-size: 24px;
  color: var(--tolak-base);
  margin-bottom: 16px;
  display: block;
}

.security-one__item__title {
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 4px;
}

.security-one__item__text {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

@media (max-width: 991px) {
  .security-one__panel {
    margin-top: 48px;
  }
}

@media (max-width: 575px) {
  .security-one__grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Case study (case-one)
--------------------------------------------------------------*/
.case-one {
  padding: 96px 0;
  background-color: var(--fsys-surface);
}

.case-one__card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid var(--fsys-line);
  border-radius: 32px;
  overflow: hidden;
  background-color: var(--fsys-surface);
  box-shadow: var(--fsys-shadow);
}

.case-one__image {
  background-color: var(--fsys-soft);
  padding: 8px;
}

.case-one__image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 24px;
}

.case-one__content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-one__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tolak-base);
  margin: 0 0 16px;
}

.case-one__title {
  font-size: 30px;
  line-height: 36px;
  margin: 0 0 16px;
}

.case-one__text {
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 24px;
}

.case-one__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 32px;
  padding: 24px 0 0;
  border-top: 1px solid var(--fsys-line);
}

.case-one__meta dt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--fsys-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.case-one__meta dd {
  margin: 0;
  font-weight: 700;
  color: var(--fsys-ink);
}

@media (max-width: 991px) {
  .case-one__card {
    grid-template-columns: 1fr;
  }
  .case-one__content {
    padding: 32px 24px;
  }
}

/*--------------------------------------------------------------
# FIX and ITCH engine (skill-one)
--------------------------------------------------------------*/
.skill-one {
  padding: 96px 0;
  background-color: var(--fsys-soft);
}

.skill-one__content__text {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 24px;
}

.skill-one__content__bar {
  display: none;
}

.skill-one__content__list {
  margin: 0 0 32px;
}

.skill-one__content__list li {
  padding-left: 40px;
  margin: 0 0 12px;
  color: var(--fsys-ink);
  font-weight: 600;
}

.skill-one__content__list li span {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background-color: var(--fsys-tint);
  color: var(--tolak-base);
  font-size: 12px;
}

.skill-one__content__list li span::after {
  display: none;
}

.skill-one__image img {
  width: 100%;
  border-radius: 24px;
  border: 8px solid var(--fsys-surface);
  box-shadow: var(--fsys-shadow-lg);
}

.skill-one__image__shape {
  display: none !important;
}

/*--------------------------------------------------------------
# Open source (about-one)
--------------------------------------------------------------*/
.about-one {
  background-color: var(--fsys-surface);
  padding: 96px 0 !important;
}

.about-one__bg, .about-one__shape {
  display: none;
}

.about-one__content {
  padding: 0 !important;
}

.about-one__content .sec-title__title {
  color: var(--fsys-ink);
}

.about-one__content__text {
  font-size: 18px !important;
  line-height: 28px;
  margin: 0 0 24px;
}

.about-one__content__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 32px;
}

.about-one__content__list li {
  float: none;
  min-width: 0;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--fsys-line);
  border-radius: 12px;
  color: var(--fsys-ink);
  font-weight: 600;
}

.about-one__content__list li span {
  color: var(--tolak-base);
}

.about-one__content__btn .tolak-btn {
  background-color: var(--fsys-ink);
  color: #fff;
  padding: 12px 24px;
}

.about-one__content__btn .tolak-btn span {
  background-color: var(--tolak-base);
}

.about-one__image {
  position: relative;
}

.about-one__image img {
  width: 100%;
  border-radius: 24px;
  border: 1px solid var(--fsys-line);
}

.about-one__image__text {
  left: 24px;
  top: auto;
  bottom: 24px;
  transform: none;
  writing-mode: horizontal-tb;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: var(--fsys-surface);
  color: var(--fsys-ink);
  box-shadow: var(--fsys-shadow);
}

.about-one__image__text span {
  display: none;
}

@media (max-width: 1199px) {
  .about-one__image {
    margin-top: 48px;
  }
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team-one {
  padding: 96px 0;
  background-color: var(--fsys-soft);
}

.team-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background-color: var(--fsys-surface);
  border: 1px solid var(--fsys-line);
  transition: transform 700ms var(--fsys-ease), box-shadow 700ms var(--fsys-ease);
}

.team-card::after {
  display: none;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fsys-shadow);
}

.team-card__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: var(--tolak-base);
  background-color: var(--fsys-tint);
}

.team-card__content {
  padding: 0;
}

.team-card__title {
  font-size: 18px;
  line-height: 28px;
  margin: 0;
}

.team-card__designation {
  font-size: 14px;
  line-height: 20px;
  color: var(--fsys-muted);
}

/*--------------------------------------------------------------
# FAQ (faq-fsys)
--------------------------------------------------------------*/
.faq-fsys {
  padding: 96px 0;
  background-color: var(--fsys-surface);
}

.faq-fsys__contact {
  margin-top: 8px;
  padding: 24px;
  border-radius: 16px;
  background-color: var(--fsys-soft);
  border: 1px solid var(--fsys-line);
}

.faq-fsys__contact h4 {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 8px;
}

.faq-fsys__contact p {
  margin: 0 0 16px;
}

.faq-fsys__accordion .accrodion {
  border: 1px solid var(--fsys-line);
  border-radius: 16px;
  background-color: var(--fsys-surface);
  margin-bottom: 12px;
  transition: border-color 500ms var(--fsys-ease), box-shadow 500ms var(--fsys-ease);
}

.faq-fsys__accordion .accrodion.active {
  border-color: rgba(var(--tolak-base-rgb), 0.32);
  box-shadow: var(--fsys-shadow);
}

.faq-fsys__accordion .accrodion-title {
  position: relative;
  cursor: pointer;
  padding: 16px 56px 16px 24px;
}

.faq-fsys__accordion .accrodion-title h4 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--fsys-ink);
}

.faq-fsys__accordion .accrodion-title::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fsys-tint);
  color: var(--tolak-base);
  font-weight: 700;
  transition: transform 500ms var(--fsys-ease);
}

.faq-fsys__accordion .accrodion.active .accrodion-title::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-fsys__accordion .accrodion-content .inner {
  padding: 0 24px 24px;
}

.faq-fsys__accordion .accrodion-content p {
  margin: 0;
}

@media (max-width: 991px) {
  .faq-fsys__accordion {
    margin-top: 48px;
  }
}

/*--------------------------------------------------------------
# Final call to action (cta-fsys)
--------------------------------------------------------------*/
.cta-fsys {
  padding: 0 0 96px;
  background-color: var(--fsys-surface);
}

.cta-fsys__card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 64px 48px;
  background-color: var(--fsys-tint);
  border: 1px solid rgba(var(--tolak-base-rgb), 0.16);
  text-align: center;
}

.cta-fsys__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(var(--tolak-base-rgb), 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--tolak-base-rgb), 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.cta-fsys__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.cta-fsys__title {
  font-size: 36px;
  line-height: 40px;
  margin: 0 0 16px;
}

.cta-fsys__text {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 32px;
}

.cta-fsys__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.cta-fsys__note {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--fsys-muted);
}

@media (max-width: 767px) {
  .cta-fsys__card {
    padding: 48px 24px;
    border-radius: 24px;
  }
  .cta-fsys__title {
    font-size: 30px;
    line-height: 36px;
  }
}

/*--------------------------------------------------------------
# Newsletter and footer
--------------------------------------------------------------*/
.mail-section {
  background-color: var(--fsys-soft);
}

.mail-section__wrapper {
  border-top: none;
  padding: 48px 0;
}

.mail-section__wrapper::after {
  display: none;
}

.mail-section__content__title {
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 4px;
}

.mail-section__content__text {
  font-size: 14px;
  line-height: 20px;
}

.mail-section__newsletter {
  position: relative;
}

.mail-section__newsletter input[type=text], .mail-section__newsletter input[type=email] {
  width: 100%;
  height: 48px;
  padding: 0 152px 0 16px;
  border: 1px solid var(--fsys-line);
  border-radius: 12px;
  background-color: var(--fsys-surface);
  color: var(--fsys-ink);
  font-size: 16px;
  outline: none;
  transition: border-color 500ms var(--fsys-ease), box-shadow 500ms var(--fsys-ease);
}

.mail-section__newsletter input:focus {
  border-color: var(--tolak-base);
  box-shadow: 0 0 0 4px rgba(var(--tolak-base-rgb), 0.12);
}

.mail-section__newsletter button {
  top: 4px;
  right: 4px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
}

.mc-form__response {
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
}

.main-footer {
  background-color: var(--fsys-surface) !important;
  border-top: 1px solid var(--fsys-line);
  padding-top: 80px;
}

.main-footer__bg, .main-footer__shape {
  display: none;
}

.footer-widget__logo img {
  width: 152px;
  height: auto;
}

.footer-widget__text {
  margin: 16px 0 24px;
  font-size: 14px;
  line-height: 20px;
  max-width: 320px;
}

.footer-widget__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fsys-ink);
  margin: 0 0 16px;
}

.footer-widget__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-widget__links li {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 20px;
}

.footer-widget__links a, .footer-widget__info a {
  color: var(--tolak-text);
  transition: color 500ms var(--fsys-ease);
}

.footer-widget__links a:hover, .footer-widget__info a:hover {
  color: var(--tolak-base);
}

.footer-widget__info {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-widget__info li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--tolak-text);
}

.footer-widget__info li span {
  color: var(--tolak-base);
  font-size: 16px;
}

.footer-widget__social {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.footer-widget__social a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fsys-soft);
  border: 1px solid var(--fsys-line);
  color: var(--fsys-ink);
  font-size: 14px;
  transition: background-color 500ms var(--fsys-ease), color 500ms var(--fsys-ease), transform 500ms var(--fsys-ease);
}

.footer-widget__social a:hover {
  background-color: var(--tolak-base);
  border-color: var(--tolak-base);
  color: #fff;
  transform: translateY(-2px);
}

.main-footer .footer-widget {
  margin-bottom: 48px;
}

.main-footer__bottom {
  background-color: var(--fsys-surface);
  border-top: 1px solid var(--fsys-line);
  padding: 24px 0;
}

.main-footer__copyright, .main-footer__bottom__list li {
  color: var(--fsys-muted);
  font-size: 14px;
  line-height: 20px;
}

.main-footer__bottom__list {
  gap: 24px;
}

.main-footer__bottom__list li::after {
  display: none;
}

.main-footer__bottom__list li a:hover {
  color: var(--tolak-base);
}

@media (max-width: 767px) {
  .main-footer__bottom__list {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 12px;
  }
}

/*--------------------------------------------------------------
# Side panel, mobile nav, scroll to top
--------------------------------------------------------------*/
.sidebar-one__content {
  background-color: var(--fsys-surface);
}

.sidebar-one__text, .sidebar-one__info li {
  color: var(--tolak-text);
}

.sidebar-one__title {
  color: var(--fsys-ink);
}

.mobile-nav__content {
  background-color: var(--fsys-surface);
}

.mobile-nav__content .main-menu__list > li > a,
.mobile-nav__contact li, .mobile-nav__contact li a, .mobile-nav__close {
  color: var(--fsys-ink);
}

.mobile-nav__content .main-menu__list > li:not(:last-child) {
  border-bottom-color: var(--fsys-line);
}

.mobile-nav__social a {
  color: var(--fsys-ink);
}

.mobile-nav__overlay {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/*--------------------------------------------------------------
# Inner pages: page header, contact, OMS details
--------------------------------------------------------------*/
.page-header {
  background-color: var(--fsys-soft);
  border: 1px solid var(--fsys-line);
  border-radius: 32px;
  margin: 0 16px 64px;
  overflow: hidden;
}

.page-header__bg {
  background-image: none;
}

.page-header__bg::before {
  display: none;
}

.page-header__content {
  padding: 96px 0 80px;
}

.page-header__title {
  font-size: 48px;
  line-height: 1;
  color: var(--fsys-ink);
}

.tolak-breadcrumb li, .tolak-breadcrumb li a, .tolak-breadcrumb li span {
  color: var(--tolak-text);
  font-size: 14px;
}

.tolak-breadcrumb li a:hover {
  color: var(--tolak-base);
}

@media (max-width: 767px) {
  .page-header {
    margin: 0 8px 48px;
    border-radius: 24px;
  }
  .page-header__content {
    padding: 64px 0 48px;
  }
  .page-header__title {
    font-size: 36px;
    line-height: 40px;
  }
}

.contact-two__wrapper {
  border-color: var(--fsys-line);
  border-radius: 32px;
  box-shadow: var(--fsys-shadow);
}

.contact-two__info {
  border-radius: 24px;
}

.contact-two__info::after {
  border-color: transparent transparent transparent var(--tolak-base);
}

.contact-two__info__shape {
  display: none;
}

.contact-two__info__box__icon::after {
  background-color: var(--fsys-ink);
}

.contact-two input[type=text], .contact-two input[type=email], .contact-two textarea,
.form-one__control input, .form-one__control textarea {
  border: 1px solid var(--fsys-line) !important;
  border-radius: 12px !important;
  background-color: var(--fsys-surface) !important;
  color: var(--fsys-ink);
  transition: border-color 500ms var(--fsys-ease), box-shadow 500ms var(--fsys-ease);
}

.contact-two input:focus, .contact-two textarea:focus,
.form-one__control input:focus, .form-one__control textarea:focus {
  border-color: var(--tolak-base) !important;
  box-shadow: 0 0 0 4px rgba(var(--tolak-base-rgb), 0.12);
  outline: none;
}

.project-details__image img {
  width: 100%;
  border-radius: 24px;
  border: 8px solid var(--fsys-surface);
  box-shadow: var(--fsys-shadow-lg);
  margin-bottom: 48px;
}

.project-details .markdown {
  max-width: 820px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 28px;
}

.project-details .markdown ol {
  padding: 0;
  list-style: none;
  counter-reset: fsys-oms;
  display: grid;
  gap: 12px;
  margin: 32px 0;
}

.project-details .markdown ol li {
  counter-increment: fsys-oms;
  position: relative;
  padding: 24px 24px 24px 72px;
  border: 1px solid var(--fsys-line);
  border-radius: 16px;
  background-color: var(--fsys-surface);
}

.project-details .markdown ol li::before {
  content: counter(fsys-oms);
  position: absolute;
  left: 24px;
  top: 24px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--fsys-tint);
  color: var(--tolak-base);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-details .markdown ol li p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.project-details .markdown strong {
  color: var(--fsys-ink);
}

/*--------------------------------------------------------------
# Scroll reveal (works alongside wow.js)
--------------------------------------------------------------*/
.fsys-reveal {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(12px);
  transition: opacity 900ms var(--fsys-ease), transform 900ms var(--fsys-ease), filter 900ms var(--fsys-ease);
}

.fsys-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .fsys-reveal, .tagline-one__word, .hero-panel__float {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}