a {
  text-decoration: none;
  color: black;
}

a:active,
a:hover {
  outline: 0;
  cursor: pointer;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
  line-height: 1.15; /* Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}

*, *::after, *::before {
  box-sizing: inherit;
}

body {
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  vertical-align: text-top;
  display: block;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

@keyframes moveGlow {
  0% {
    --gx: 70%;
    --gy: 62%;
  }
  33% {
    --gx: 55%;
    --gy: 50%;
  }
  66% {
    --gx: 65%;
    --gy: 70%;
  }
  100% {
    --gx: 75%;
    --gy: 55%;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes globeSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-40deg);
  }
}
@property --gx {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}
@property --gy {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 62%;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/Lexend-VariableFont_wght.woff2") format("woff2");
}
h1 {
  font-weight: 600;
  font-size: clamp(25px, 25px + 25 * (100vw - 370px) / 1730, 50px);
  line-height: clamp(33.75px, 33.75px + 36.25 * (100vw - 370px) / 1730, 70px);
  padding-block: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-inline: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-top: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-bottom: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-left: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-right: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}

h2 {
  font-weight: 500;
  font-size: clamp(22px, 22px + 8 * (100vw - 370px) / 1730, 30px);
  line-height: clamp(29.7px, 29.7px + 12.3 * (100vw - 370px) / 1730, 42px);
  padding-block: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-inline: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  padding-top: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-bottom: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-left: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  padding-right: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}

h3 {
  font-weight: 200;
  font-size: clamp(18px, 18px + 4 * (100vw - 370px) / 1730, 22px);
  line-height: clamp(24.3px, 24.3px + 6.5 * (100vw - 370px) / 1730, 30.8px);
  padding-block: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-inline: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-top: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-bottom: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-left: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-right: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}

p {
  font-size: clamp(18px, 18px + 4 * (100vw - 370px) / 1730, 22px);
  line-height: clamp(27px, 27px + 8.2 * (100vw - 370px) / 1730, 35.2px);
  padding-block: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-inline: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-top: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-bottom: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-left: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-right: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}
p mark {
  background-color: transparent;
  color: #59AF30;
}
p span {
  font-weight: 600;
}

.button {
  font-size: clamp(16px, 16px + 4 * (100vw - 600px) / 1500, 20px);
  line-height: clamp(21.6px, 21.6px + 6.4 * (100vw - 600px) / 1500, 28px);
  padding-block: clamp(8px, 8px + 5 * (100vw - 600px) / 1500, 13px);
  padding-inline: clamp(12px, 12px + 6 * (100vw - 600px) / 1500, 18px);
  padding-top: clamp(8px, 8px + 5 * (100vw - 600px) / 1500, 13px);
  padding-bottom: clamp(8px, 8px + 5 * (100vw - 600px) / 1500, 13px);
  padding-left: clamp(12px, 12px + 6 * (100vw - 600px) / 1500, 18px);
  padding-right: clamp(12px, 12px + 6 * (100vw - 600px) / 1500, 18px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 600px) / 1500, 0px);
  border-radius: 30px;
}
.button.blue {
  border: 2px solid #10293F;
  background-color: #10293F;
  color: #DCDFE2;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.button.blue:hover {
  border: 2px solid #59AF30;
  color: #59AF30;
}
.button.thanks {
  border: 2px solid #59AF30;
  color: #59AF30;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.button.thanks:hover {
  background-color: #59AF30;
  color: #DCDFE2;
}
.button.green {
  border: 2px solid #59AF30;
  color: #59AF30;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.button.green:hover {
  background-color: #59AF30;
  color: #040d18;
}

a {
  font-size: clamp(18px, 18px + 2 * (100vw - 370px) / 1730, 20px);
  line-height: clamp(24.3px, 24.3px + 3.7 * (100vw - 370px) / 1730, 28px);
  padding-block: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-inline: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-top: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-bottom: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-left: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-right: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}

a:not([class]):not([id]) {
  cursor: pointer;
  position: relative;
}
a:not([class]):not([id])::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #59AF30;
  transition: width 0.2s;
}
a:not([class]):not([id]):hover:after {
  width: 100%;
}

.invisibile {
  display: none;
}

body {
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  background-color: #040d18;
}

main {
  width: 100%;
  max-width: 2100px;
  margin: 0 auto;
  transition: filter 0.5s ease;
}
main.blurred {
  filter: blur(6px);
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  background-color: #DCDFE2;
  transform: translateY(-100%);
  transition: transform 2.5s ease;
}
header.header-visible {
  transform: translateY(0);
}
header nav {
  width: 100%;
  max-width: 2100px;
  height: 100px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1800px) {
  header nav {
    height: 80px;
  }
}
@media only screen and (max-width: 1200px) {
  header nav {
    height: 60px;
    padding: 0 20px;
  }
}
header nav img {
  height: 90%;
}
header nav ul {
  margin-left: auto;
  display: flex;
  gap: 25px;
}
@media only screen and (max-width: 900px) {
  header nav ul {
    gap: 15px;
  }
}
@media only screen and (max-width: 600px) {
  header nav ul li.phone-hide {
    display: none;
  }
}
header nav ul li a {
  color: #10293F;
}
@media only screen and (max-width: 900px) {
  header nav ul li a:not([class]) {
    display: none;
  }
}

#hamburger {
  display: none;
  margin-left: 15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #10293F;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media only screen and (max-width: 900px) {
  #hamburger {
    display: block;
  }
}
#hamburger span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: #10293F;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background-color 0.35s ease;
}
#hamburger span:nth-child(1) {
  top: calc(50% - 6px);
  transform: translateX(-50%);
}
#hamburger span:nth-child(2) {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#hamburger span:nth-child(3) {
  top: calc(50% + 4px);
  transform: translateX(-50%);
}
#hamburger.open span:nth-child(1) {
  background-color: #59AF30;
  width: 22px;
  transform: translateX(-50%) translateY(5px) rotate(45deg);
  transition-delay: 0.06s;
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
  width: 0;
  transition-delay: 0s;
}
#hamburger.open span:nth-child(3) {
  background-color: #59AF30;
  width: 22px;
  transform: translateX(-50%) translateY(-5px) rotate(-45deg);
  transition-delay: 0.06s;
}

#nav-panel {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100%;
  z-index: 90;
  background-color: #DCDFE2;
  height: 0;
  overflow: hidden;
  display: none;
  border-radius: 0;
  transition: height 0.5s cubic-bezier(0.76, 0, 0.24, 1), border-radius 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
@media only screen and (max-width: 1800px) {
  #nav-panel {
    top: 80px;
  }
}
@media only screen and (max-width: 1200px) {
  #nav-panel {
    top: 60px;
  }
}
@media only screen and (max-width: 900px) {
  #nav-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
#nav-panel.open {
  border-radius: 0 0 40px 40px;
}
#nav-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 22px 30px 28px;
  gap: 16px;
}
#nav-panel ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 15px;
  border-bottom: 1px solid #10293F;
}
#nav-panel ul li img {
  width: 55px;
}
#nav-panel ul li a {
  color: #10293F;
  font-size: clamp(20px, 20px + 10 * (100vw - 370px) / 530, 30px);
  line-height: clamp(27px, 27px + 15 * (100vw - 370px) / 530, 42px);
  padding-block: clamp(0px, 0px + 0 * (100vw - 370px) / 530, 0px);
  padding-inline: clamp(0px, 0px + 0 * (100vw - 370px) / 530, 0px);
  padding-top: clamp(0px, 0px + 0 * (100vw - 370px) / 530, 0px);
  padding-bottom: clamp(0px, 0px + 0 * (100vw - 370px) / 530, 0px);
  padding-left: clamp(0px, 0px + 0 * (100vw - 370px) / 530, 0px);
  padding-right: clamp(0px, 0px + 0 * (100vw - 370px) / 530, 0px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 530, 0px);
}
#nav-panel ul li:nth-last-child(-n+2) {
  display: none;
  border: none;
  border-radius: 30px;
}
@media only screen and (max-width: 600px) {
  #nav-panel ul li:nth-last-child(-n+2) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
  }
}
#nav-panel ul li:nth-last-child(2) {
  background-color: #10293F;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#nav-panel ul li:nth-last-child(2) a {
  color: #DCDFE2;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#nav-panel ul li:nth-last-child(2) a::after {
  display: none;
}
#nav-panel ul li:nth-last-child(2) a:hover {
  color: #59AF30;
}
#nav-panel ul li:nth-last-child(1) {
  border: 2px solid #59AF30;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#nav-panel ul li:nth-last-child(1):hover {
  background-color: #59AF30;
}
#nav-panel ul li:nth-last-child(1) a {
  color: #59AF30;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#nav-panel ul li:nth-last-child(1) a::after {
  display: none;
}
#nav-panel ul li:nth-last-child(1) a:hover {
  color: #DCDFE2;
}

#above-the-fold {
  width: 100%;
  height: 100svh;
  min-height: 800px;
  display: flex;
  background: linear-gradient(to right, #040d18 0%, transparent 40%, transparent 70%, #040d18 100%), radial-gradient(ellipse at var(--gx, 70%) var(--gy, 72%), #0e2540 0%, #071828 85%, #040d18 100%);
  animation: moveGlow 16s ease-in-out infinite alternate;
}
@media only screen and (max-width: 2100px) {
  #above-the-fold {
    position: relative;
  }
}
@media only screen and (max-width: 1800px) {
  #above-the-fold {
    min-height: 700px;
  }
}
@media only screen and (max-width: 1200px) {
  #above-the-fold {
    height: auto;
    min-height: auto;
    flex-direction: column-reverse;
    position: relative;
    padding: 100px 0 50px 0;
  }
}
#above-the-fold .monitor-effect {
  width: 100%;
  height: 100%;
  min-height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23173956' fill-opacity='0.25'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}
@media only screen and (max-width: 2100px) {
  #above-the-fold .monitor-effect {
    min-height: auto;
  }
}
#above-the-fold .left-side {
  width: 50%;
  height: 100%;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1200px) {
  #above-the-fold .left-side {
    width: 100%;
  }
}
#above-the-fold .left-side article {
  width: 80%;
  color: #DCDFE2;
}
@media only screen and (max-width: 600px) {
  #above-the-fold .left-side article {
    width: 90%;
  }
}
#above-the-fold .left-side article > * {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#above-the-fold .left-side article.article-visible > *:nth-child(1) {
  transition-delay: 0.2s;
}
#above-the-fold .left-side article.article-visible > *:nth-child(2) {
  transition-delay: 0.7s;
}
#above-the-fold .left-side article.article-visible > *:nth-child(3) {
  transition-delay: 1.2s;
}
#above-the-fold .left-side article.article-visible > *:nth-child(4) {
  transition-delay: 1.7s;
}
#above-the-fold .left-side article.article-visible > *:nth-child(5) {
  transition-delay: 2.2s;
}
#above-the-fold .left-side article.article-visible > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}
#above-the-fold .left-side article h1 {
  margin-bottom: 50px;
}
@media only screen and (max-width: 1500px) {
  #above-the-fold .left-side article h1 {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 1200px) {
  #above-the-fold .left-side article h1 {
    text-align: center;
    margin-bottom: 10px;
  }
}
#above-the-fold .left-side article p:first-of-type {
  margin-bottom: 30px;
}
@media only screen and (max-width: 600px) {
  #above-the-fold .left-side article p:first-of-type {
    margin-bottom: 20px;
  }
}
#above-the-fold .left-side article .links {
  margin-top: 50px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  gap: 50px;
}
@media only screen and (max-width: 1500px) {
  #above-the-fold .left-side article .links {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 1200px) {
  #above-the-fold .left-side article .links {
    justify-content: center;
  }
}
@media only screen and (max-width: 600px) {
  #above-the-fold .left-side article .links {
    display: none;
  }
}
#above-the-fold .right-side {
  width: 50%;
  height: 100%;
  z-index: 50;
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  #above-the-fold .right-side {
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: 0 auto;
  }
}
#above-the-fold .right-side #logo {
  width: 45%;
  position: absolute;
  top: 16%;
  left: 0;
  z-index: 70;
  opacity: 0;
  filter: blur(20px);
  transform: translateY(-20px);
  transition: opacity 2.5s ease, filter 2.5s ease, transform 2.5s ease;
}
@media only screen and (max-width: 1200px) {
  #above-the-fold .right-side #logo {
    width: 50%;
    top: 30px;
    left: 50%;
    margin-left: -25%;
  }
}
#above-the-fold .right-side #logo.logo-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px);
}
#above-the-fold .right-side #logo img {
  width: 100%;
}
#above-the-fold .right-side .scene {
  width: min(100%, 90vh);
  height: min(100%, 90vh);
  aspect-ratio: 1;
  cursor: default;
}
@media only screen and (max-width: 1200px) {
  #above-the-fold .right-side .scene {
    opacity: 0.6;
  }
}
#above-the-fold .right-side .scene svg {
  width: 100%;
  height: 100%;
}
#above-the-fold .right-side .scene.spinning svg {
  animation: globeSpin 12s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#above-the-fold .right-side svg path {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-play-state: paused;
}
#above-the-fold .right-side .running svg path {
  animation-play-state: running;
}

#futures {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 50px 50px 50px;
  background: linear-gradient(to right, #040d18 0%, #24272E 40%, #24272E 60%, #040d18 100%);
  border-top: 1px solid #040d18;
  border-bottom: 1px solid #040d18;
}
@media only screen and (max-width: 900px) {
  #futures {
    padding: 20px 40px;
  }
}
@media only screen and (max-width: 600px) {
  #futures {
    padding: 10px 0;
  }
}
#futures h1 {
  color: #59AF30;
}
#futures #code-panel {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
@media only screen and (max-width: 900px) {
  #futures #code-panel {
    width: 90%;
  }
}
#futures #code-panel > div {
  width: 610px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 20px;
}
@media only screen and (max-width: 900px) {
  #futures #code-panel > div {
    width: 100%;
  }
}
#futures #code-panel > div h2 {
  width: 100%;
  background-color: #59AF30;
  color: #040d18;
  text-align: center;
}
#futures #code-panel > div h2 + p {
  color: #DCDFE2;
  margin: 50px 0;
}
@media only screen and (max-width: 900px) {
  #futures #code-panel > div h2 + p {
    margin: 40px 0;
  }
}
@media only screen and (max-width: 600px) {
  #futures #code-panel > div h2 + p {
    margin: 20px 0;
  }
}
#futures #code-panel > div .terminal-group {
  display: flex;
  flex-direction: column;
}
#futures #code-panel > div .terminal-group > p {
  font-weight: 200;
  color: #59AF30;
  margin-left: auto;
  border-top: 1px solid #59AF30;
  border-right: 1px solid #59AF30;
  border-left: 1px solid #59AF30;
  margin-bottom: 0;
  padding: 0 10px;
}
#futures #code-panel > div .terminal-group .terminal {
  border: 1px solid #59AF30;
  background-color: #040d18;
  padding: 50px;
}
@media only screen and (max-width: 900px) {
  #futures #code-panel > div .terminal-group .terminal {
    padding: 30px;
  }
}
@media only screen and (max-width: 600px) {
  #futures #code-panel > div .terminal-group .terminal {
    padding: 10px;
  }
}
#futures #code-panel > div .terminal-group .terminal p {
  color: orange;
  font-weight: 200;
  font-size: clamp(16px, 16px + 2 * (100vw - 370px) / 1730, 18px);
  line-height: clamp(16px, 16px + 2 * (100vw - 370px) / 1730, 18px);
  padding-block: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-inline: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  padding-top: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-bottom: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-left: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  padding-right: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}
#futures #code-panel > div .terminal-group .terminal p span {
  font-weight: 200;
  color: #59AF30;
}
#futures #code-panel > div .terminal-group .terminal p span i {
  font-size: 14px;
}
#futures .info {
  width: 100%;
  max-width: 1500px;
  background-color: #040d18;
  color: #DCDFE2;
  padding: 20px;
  border-radius: 30px;
}
@media only screen and (max-width: 900px) {
  #futures .info {
    width: 90%;
  }
}
#futures .info p {
  font-weight: 200;
  font-size: clamp(16px, 16px + 2 * (100vw - 370px) / 1730, 18px);
  line-height: clamp(21.6px, 21.6px + 3.6 * (100vw - 370px) / 1730, 25.2px);
  padding-block: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-inline: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  padding-top: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-bottom: clamp(12px, 12px + 1 * (100vw - 370px) / 1730, 13px);
  padding-left: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  padding-right: clamp(14px, 14px + 4 * (100vw - 370px) / 1730, 18px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}

#howto {
  width: 100%;
  position: relative;
  background: linear-gradient(to right, #040d18 0%, transparent 40%, transparent 70%, #040d18 100%), radial-gradient(ellipse at var(--gx, 70%) var(--gy, 72%), #0e2540 0%, #071828 85%, #040d18 100%);
}
#howto .monitor-effect {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23173956' fill-opacity='0.25'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}
#howto .howto-content {
  position: relative;
  z-index: 50;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 30px 80px 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media only screen and (max-width: 1200px) {
  #howto .howto-content {
    padding: 30px;
  }
}
@media only screen and (max-width: 600px) {
  #howto .howto-content {
    padding: 20px 10px;
  }
}
#howto h1 {
  color: #59AF30;
  text-align: center;
}
#howto .howto-card {
  background-color: rgba(16, 41, 63, 0.4);
  border: 1px solid rgba(16, 41, 63, 0.1);
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#howto .howto-card .card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #DCDFE2;
}
@media only screen and (max-width: 600px) {
  #howto .howto-card .card-label {
    text-align: center;
  }
}
#howto .howto-card hr {
  border: none;
  border-top: 1px solid rgba(89, 175, 48, 0.3);
}
@media only screen and (max-width: 600px) {
  #howto .howto-card hr {
    display: none;
  }
}
#howto .howto-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
@media only screen and (max-width: 600px) {
  #howto .howto-step {
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }
}
#howto .howto-step.underline {
  padding-bottom: 50px;
  border-bottom: 1px solid #59AF30;
}
#howto .howto-step .step-number {
  font-size: clamp(120px, 120px + 80 * (100vw - 370px) / 1730, 200px);
  line-height: clamp(120px, 120px + 160 * (100vw - 370px) / 1730, 280px);
  padding-block: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-inline: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-top: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-bottom: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-left: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  padding-right: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
  font-weight: 700;
  color: #59AF30;
  flex-shrink: 0;
}
#howto .howto-step .step-body h3 {
  color: #59AF30;
  margin-bottom: 12px;
  font-weight: 300;
}
@media only screen and (max-width: 600px) {
  #howto .howto-step .step-body h3 {
    text-align: center;
  }
}
#howto .howto-step .step-body p {
  color: #DCDFE2;
}
#howto .howto-step .step-body code {
  background: rgba(16, 41, 63, 0.8);
  border: 1px solid #59AF30;
  color: #59AF30;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}
#howto .github-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  background-color: #24272E;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  padding: 30px;
}
@media only screen and (max-width: 600px) {
  #howto .github-card {
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
    padding: 10px 30px 30px 30px;
  }
}
#howto .github-card .github-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
#howto .github-card .github-left img {
  width: 80px;
  filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.9)) drop-shadow(-1px -1px 3px rgba(255, 255, 255, 0.06));
}
#howto .github-card .github-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#howto .github-card .github-right h3 {
  color: #59AF30;
  font-weight: 300;
}
@media only screen and (max-width: 600px) {
  #howto .github-card .github-right h3 {
    text-align: center;
  }
}
#howto .github-card .github-right p {
  color: #DCDFE2;
}

#why-https {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 20px 0 60px 0;
  background: linear-gradient(to right, #040d18 0%, transparent 40%, transparent 70%, #040d18 100%), radial-gradient(ellipse at 30% 50%, #0e2540 0%, #071828 85%, #040d18 100%);
}
#why-https::before, #why-https::after {
  content: "";
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
@media only screen and (max-width: 900px) {
  #why-https::before, #why-https::after {
    width: 80px;
  }
}
@media only screen and (max-width: 600px) {
  #why-https::before, #why-https::after {
    width: 50px;
  }
}
#why-https::before {
  left: 0;
  background: linear-gradient(to right, #040d18, transparent);
}
#why-https::after {
  right: 0;
  background: linear-gradient(to left, #040d18, transparent);
}
#why-https h1 {
  color: #59AF30;
  text-align: center;
  padding: 0 30px 30px 30px;
}
#why-https h1 span {
  display: none;
}
@media only screen and (max-width: 600px) {
  #why-https h1 span {
    display: inline;
  }
}
#why-https .why-track {
  display: flex;
  gap: 50px;
  width: max-content;
}
#why-https .why-card {
  width: 320px;
  flex-shrink: 0;
  background-color: rgba(16, 41, 63, 0.5);
  border: 2px solid rgba(220, 223, 226, 0.15);
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
@media only screen and (max-width: 600px) {
  #why-https .why-card {
    padding: 20px 15px;
  }
}
#why-https .why-card:hover {
  border-color: #59AF30;
  background-color: rgba(16, 41, 63, 0.8);
}
#why-https .why-card h3 {
  color: #59AF30;
  font-weight: 700;
}
#why-https .why-card p {
  color: rgba(220, 223, 226, 0.6);
  font-weight: 300;
}
@media only screen and (max-width: 900px) {
  #why-https .why-card p {
    color: rgba(220, 223, 226, 0.8);
  }
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
footer {
  background-color: #040d18;
  color: rgba(220, 223, 226, 0.6);
  text-align: center;
  font-size: clamp(15px, 15px + 1 * (100vw - 370px) / 1730, 16px);
  line-height: clamp(22.5px, 22.5px + 3.1 * (100vw - 370px) / 1730, 25.6px);
  padding-block: clamp(20px, 20px + 10 * (100vw - 370px) / 1730, 30px);
  padding-inline: clamp(10px, 10px + 0 * (100vw - 370px) / 1730, 10px);
  padding-top: clamp(20px, 20px + 10 * (100vw - 370px) / 1730, 30px);
  padding-bottom: clamp(20px, 20px + 10 * (100vw - 370px) / 1730, 30px);
  padding-left: clamp(10px, 10px + 0 * (100vw - 370px) / 1730, 10px);
  padding-right: clamp(10px, 10px + 0 * (100vw - 370px) / 1730, 10px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}
footer a {
  color: rgba(220, 223, 226, 0.6);
  font-size: clamp(15px, 15px + 1 * (100vw - 370px) / 1730, 16px);
  line-height: clamp(22.5px, 22.5px + 3.1 * (100vw - 370px) / 1730, 25.6px);
  padding-block: clamp(20px, 20px + 10 * (100vw - 370px) / 1730, 30px);
  padding-inline: clamp(10px, 10px + 0 * (100vw - 370px) / 1730, 10px);
  padding-top: clamp(20px, 20px + 10 * (100vw - 370px) / 1730, 30px);
  padding-bottom: clamp(20px, 20px + 10 * (100vw - 370px) / 1730, 30px);
  padding-left: clamp(10px, 10px + 0 * (100vw - 370px) / 1730, 10px);
  padding-right: clamp(10px, 10px + 0 * (100vw - 370px) / 1730, 10px);
  letter-spacing: clamp(0px, 0px + 0 * (100vw - 370px) / 1730, 0px);
}
footer a:hover {
  color: #59AF30;
}
footer > a {
  display: inline-block;
  padding: 0 0 4px;
}
footer #cookies a:hover {
  color: #DCDFE2;
}

#cookies {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  gap: 30px;
}
@media only screen and (max-width: 1200px) {
  #cookies {
    justify-content: center;
    padding: 20px 0;
  }
}
#cookies a {
  font-size: 1em;
  padding: 0;
  line-height: 1;
  color: #59AF30;
}

#cookie-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 350px;
  background: #1a1a1a;
  color: white;
  padding: 20px;
  z-index: 9999;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}
@media only screen and (max-width: 600px) {
  #cookie-banner {
    right: 50%;
    transform: translateX(50%);
    width: calc(100% - 40px);
  }
}
#cookie-banner small {
  display: block;
  text-align: justify;
}
#cookie-banner .cookie-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#cookie-banner .cookie-buttons button {
  flex: 1;
  font-variation-settings: "wght" 500;
  padding: 12px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  color: black;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#cookie-banner .cookie-buttons button:first-child:hover {
  background: #007E00;
}
#cookie-banner .cookie-buttons button:last-child:hover {
  background: #FF0000;
}
#cookie-banner .cookie-buttons button:hover {
  color: #fff;
}
#cookie-banner #cookie-preferences {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  background: #666;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  color: black;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#cookie-banner #cookie-preferences:hover {
  color: #fff;
}

#cookie-panel {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}
#cookie-panel.hidden {
  display: none;
}
#cookie-panel .cookie-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
#cookie-panel .cookie-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1a1a1a;
  color: white;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  border-radius: 10px;
  z-index: 10001;
  overflow-y: auto;
}
#cookie-panel .cookie-modal h2 {
  font-variation-settings: "wght" 500;
  margin-bottom: 10px;
}
#cookie-panel .cookie-modal small {
  display: block;
  margin-bottom: 20px;
  text-align: justify;
}
#cookie-panel .cookie-modal small a {
  color: cornflowerblue;
}
#cookie-panel .cookie-modal small a:hover {
  text-decoration: underline;
}
#cookie-panel .cookie-modal ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}
#cookie-panel .cookie-modal ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#cookie-panel .cookie-modal .cookie-panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
#cookie-panel .cookie-modal .cookie-panel-footer button {
  flex: 1;
  font-variation-settings: "wght" 500;
  padding: 12px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background: #666;
  color: black;
  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#cookie-panel .cookie-modal .cookie-panel-footer button:hover {
  color: #DCDFE2;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 52px;
  height: 28px;
}
.toggle-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.toggle-switch label {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.toggle-switch label .slider {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FF0000;
  border-radius: 34px;
  transition: background-color 0.3s;
  pointer-events: none;
}
.toggle-switch label .slider::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  pointer-events: none;
}
.toggle-switch input:checked + label .slider {
  background-color: #007E00;
}
.toggle-switch input:checked + label .slider::before {
  transform: translateX(24px);
}
.toggle-switch input:disabled + label .slider {
  background-color: #888;
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle-switch input:disabled:checked + label .slider {
  background-color: #007E00;
  opacity: 0.5;
}