:root {
  --radius: 4px;
  --radius-large: 5px;
  --radius-full: 9999px;
  --box-shadow: 0 15px 30px -15px #EEE;
  --color-black: #000;
  --color-white: #FFF;
  --color-blue-100: #F4F8FB;
  --color-blue-200: #D0E6FF;
  --color-blue-300: #36B9CC;
  --color-blue-400: #4385C9;
  --color-purple-100: #EBE9F6;
  --color-purple-200: #A89AEC;
  --color-pink-100: #FFE7D6;
  --fluid-5xl: ;
  --fluid-4xl: clamp(2.25rem, calc(1.93rem + 1.43vw), 3.00rem);
  --fluid-3xl: clamp(1.75rem, calc(1.54rem + 0.95vw), 2.25rem);
  --fluid-2xl: clamp(1.50rem, calc(1.39rem + 0.48vw), 1.75rem);
  --fluid-xl: clamp(1.25rem, calc(1.14rem + 0.48vw), 1.50rem);
  --fluid-lg: clamp(1.13rem, calc(1.02rem + 0.48vw), 1.38rem);
  --fluid-md: clamp(1.13rem, calc(1.07rem + 0.24vw), 1.25rem);
  --fluid-base: clamp(1.00rem, calc(0.95rem + 0.24vw), 1.13rem);
  --fluid-alt-1: clamp(2.81rem, calc(2.14rem + 2.98vw), 4.38rem);
  --fluid-alt-2: clamp(1.75rem, calc(1.43rem + 1.43vw), 2.50rem);
  --fluid-alt-3: clamp(1.06rem, calc(1.01rem + 0.24vw), 1.19rem);
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='m0 3.7 1.4-1.4L6 6.9l4.6-4.6L12 3.7l-6 6'/%3E%3C/svg%3E");
  --icon-spinner: url("data:image/svg+xml,%3Csvg class='spinner' width='24' height='24' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle class='path' fill='none' stroke='%23fff' stroke-width='6' cx='33' cy='33' r='30'%3E%3C/circle%3E%3Cstyle%3E svg %7B animation: rotator 1.4s linear infinite; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(270deg); %7D %7D circle %7B stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center; animation: dash 1.4s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 187; %7D 50%25 %7B stroke-dashoffset: 46.75; transform: rotate(135deg); %7D 100%25 %7B stroke-dashoffset: 187; transform: rotate(450deg); %7D %7D %3C/style%3E%3C/svg%3E");
  --icon-plus:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 1V6M6 6V11M6 6H1M6 6H11' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
  --icon-minus: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H11' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
  --icon-cross: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8L32 32M32 8L8 32' stroke='black' stroke-width='3'/%3E%3C/svg%3E%0A");
  --icon-videos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 8H2v12a2 2 0 0 0 2 2h12v-2H4V8Z'/%3E%3Cpath fill='%23000' d='M20 2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm-9 12V6l7 4-7 4Z'/%3E%3C/svg%3E");
  --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='52' fill='none' viewBox='0 0 50 52'%3E%3Cpath stroke='%23000' stroke-width='3' d='M23 1c1.2 19.3 7 30 26.5 31.1-14.5 0-20.8 6.5-26 18.9C27 37 17 33.5.5 32.1A27.2 27.2 0 0 0 23 1Z'/%3E%3C/svg%3E");
  --icon-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='45' fill='none' viewBox='0 0 33 45'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='2.5' d='M26.7 14.2 11 29.4M5.8 4.2 2.6 16.4m14.3 23 14.1.2'/%3E%3C/svg%3E");
  --icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='50' r='3.75' fill='%23C8C8C8'/%3E%3C/svg%3E%0A");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='24' viewBox='0 0 36 24'%3E%3Cpath fill='%23181818' fill-rule='evenodd' d='M.5 12a1.25 1.25 0 0 1 1.25-1.25h29.48l-7.87-7.86a1.25 1.25 0 0 1 1.78-1.77l10 10a1.25 1.25 0 0 1 0 1.77l-10 10a1.25 1.25 0 0 1-1.78-1.77l7.87-7.87H1.75A1.25 1.25 0 0 1 .5 12Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 11L3 1V21L21 11Z'/%3E%3C/svg%3E%0A");
  --icon-yt-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='48' fill='red' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.7C65.7 4.8 64 2.3 61 1.5 55.8.1 34 0 34 0S12.2.1 6.9 1.6c-3 .7-4.6 3.2-5.4 6.1-2 10.7-2 21.8 0 32.5.8 3 2.5 5.5 5.4 6.3 5.3 1.4 27 1.5 27 1.5s21.9-.1 27.2-1.6c3-.7 4.6-3.2 5.4-6.1C68 35 68 24 68 24s0-11-1.5-16.3Z'/%3E%3C/svg%3E");
  --youtube-thumb: var(--icon-play) calc(50% + 1px) center no-repeat, var(--icon-yt-bg) center no-repeat, url("https://img.youtube.com/vi/5bMsJkJ3wBI/maxresdefault.jpg") center/cover no-repeat;
  --icon-step-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40'%3E%3Cpath stroke='%2336B9CC' stroke-linecap='round' stroke-width='3' d='m16.78 11.22 4.5-4.5A8.17 8.17 0 0 1 33 7.01a8.17 8.17 0 0 1 .29 11.73l-4.5 4.5m-17.74-6.3-4.5 4.5a8.17 8.17 0 0 0 .29 11.73 8.17 8.17 0 0 0 11.73.3l4.5-4.5m2.57-14.6L14.21 25.82'/%3E%3C/svg%3E");
  --icon-step-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 41 40'%3E%3Cpath stroke='%2336B9CC' stroke-linecap='round' stroke-width='3' d='M3.44 15.06c0-4.46 3.44-11.39 11.3-11.5a.1.1 0 0 1 .1.16l-1.9 2.84m24 19c0 4.46-3.45 11.39-11.31 11.5a.1.1 0 0 1-.09-.16l1.9-2.84m-1-30.5h7a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4h-7a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4Zm-19 18h7a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4h-7a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4Z'/%3E%3C/svg%3E");
  --icon-step-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 41 40'%3E%3Cpath stroke='%2336B9CC' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5.94 33.56h30m-15-28v21m0 0-8.5-8.5m8.5 8.5 8.5-8.5'/%3E%3C/svg%3E");
  --icon-step-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 41 40'%3E%3Cpath stroke='%2336B9CC' stroke-linecap='round' stroke-width='3' d='M14.4 15.6V8.8c0-2.6 1.8-7.2 7-7.2 5.3 0 7 4.6 7 7.2v1.8m-7 14V31m-12 7h23a3 3 0 0 0 3-3V19a3 3 0 0 0-3-3h-23a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3Zm11-14.4a1.4 1.4 0 1 0 2 2 1.4 1.4 0 0 0-2-2Z'/%3E%3C/svg%3E");
}

:root {
  --bg: #FFF;
  --text: #000;
  --dull: #444;
  --hover: #EEE;
}

.primary, .dark, #site-footer {
  --bg: #000;
  --text: #FFF;
  --dull: #999;
  --hover: #DDD;
}

.dark, #site-footer {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
.dark :is(strong, b, a), #site-footer :is(strong, b, a) {
  color: var(--text);
}
.dark a:is(:hover, :focus-visible), #site-footer a:is(:hover, :focus-visible) {
  color: var(--hover);
}
.dark p, #site-footer p {
  color: var(--dull);
}
.dark .primary, #site-footer .primary {
  background-color: var(--text);
  color: var(--bg) !important;
}
.dark .primary:is(:hover, :focus-visible), #site-footer .primary:is(:hover, :focus-visible) {
  background-color: var(--hover) !important;
}

/* RESET */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  color: inherit;
  font: inherit;
  border: none;
  border-radius: var(--radius);
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.3;
}

button {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: transparent;
  padding: 2px;
  transition: background-color 0.2s;
  user-select: none;
  cursor: pointer;
}
button > svg {
  width: 45px;
  height: 45px;
}

hr, input, select, textarea {
  border: 2px solid #CCC;
}

hr {
  border-width: 0 0 2px 2px !important;
}

:focus-visible {
  outline: 3px solid #04f;
  outline-offset: 0px;
  transition: outline-width 0.2s;
}

/* BASE */
html {
  background-color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  text-size-adjust: none;
}
html, html body {
  min-width: 360px;
  overflow-x: hidden;
}
html.noscroll {
  overflow-y: hidden;
}
html.noscroll > body {
  overflow-y: scroll;
}

body {
  font-size: 17px;
}

a {
  color: #000;
  border-radius: var(--radius);
  transition: background-color 0.2s;
}
a:not(p a) {
  text-decoration: none;
}

.primary {
  background-color: var(--bg);
  color: var(--text);
  text-align: center;
  padding: 15px 22px;
}
.primary:is(:hover, :focus-visible) {
  background-color: #333 !important;
}
.primary > svg {
  width: 24px;
  height: 23px;
}

.icon {
  border-radius: var(--radius-full);
  background-color: rgba(59, 89, 152, 0.6509803922);
}

.loading {
  padding-left: 15px;
}
.loading::before {
  content: var(--icon-spinner);
  height: 23px;
}

h1 {
  font-size: var(--fluid-4xl);
}

h2 {
  font-size: var(--fluid-3xl);
}

h3 {
  font-size: var(--fluid-2xl);
}

h4, h5, h6 {
  font-size: var(--fluid-xl);
}

b {
  font-weight: 500;
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  user-select: none !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* SITE-HEADER */
#site-header {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
}
#site-header nav {
  display: flex;
  gap: 5px;
}
#site-header :is(a, button):hover, #site-header .drop-down.active > button {
  background-color: var(--hover);
}
#site-header :is(a, button) {
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 15px;
}
#site-header .drop-down > div {
  top: calc(100% + 5px);
  padding: 5px;
  border: 2px solid #ddd;
}
#site-header .drop-down > div > * {
  height: 40px;
  padding: 0 10px;
}
@media (min-width: 901px) {
  #site-header > :is(#mob-menu, .drop-down) {
    display: none;
  }
}
@media (max-width: 900px) {
  #site-header {
    display: grid;
    grid: 45px calc(100vh - 55px)/auto 1fr auto 45px;
    gap: 8px;
    height: 65px;
    padding: 10px 8px;
  }
  #site-header.open {
    height: 100vh;
  }
  #site-header.open > nav {
    opacity: 1;
    visibility: visible;
  }
  #site-header.open > #mob-menu {
    background-color: var(--hover);
  }
  #site-header.open > #mob-menu::before {
    transform: rotate(-45deg);
  }
  #site-header.open > #mob-menu::after {
    transform: rotate(45deg);
  }
  #site-header > nav {
    grid-area: 2/1/-1/-1;
    flex-direction: column;
    width: min(100%, 600px);
    padding: 30px 5% 100px;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    overflow: auto;
  }
  #site-header > nav > :is(a, .drop-down) {
    min-height: 45px;
    border-radius: 0;
    box-shadow: 0 2px 0 #eee;
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  #site-header > nav > :is(a, .drop-down):is(:hover, :focus-visible, .active) {
    border-radius: var(--radius);
    box-shadow: 0 0 0 #eee;
  }
  #site-header > nav > .drop-down {
    height: 45px;
    transition: height 0.3s;
  }
  #site-header > nav > .drop-down.active {
    height: 180px;
  }
  #site-header > nav > .drop-down > div {
    top: unset;
  }
  #site-header > .drop-down {
    justify-self: end;
  }
  #site-header > #mob-menu {
    grid-area: 1/4/2/-1;
    position: relative;
    width: 100%;
    color: rgba(0, 0, 0, 0);
  }
  #site-header > #mob-menu::before, #site-header > #mob-menu::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 20px;
    height: 1.7px;
    margin: auto;
    background-color: #000;
    transform: translateY(-5px);
  }
  #site-header > #mob-menu::after {
    transform: translateY(5px);
  }
}
#site-header .badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background-color: var(--color-blue-400);
  color: #fff;
  border-radius: var(--radius-large);
  font-weight: 600;
}
#site-header .badge span {
  background-color: #f6c23e;
  color: #555;
  padding: 3px;
  border-radius: var(--radius);
  font-size: 12px;
}

/* SITE-FOOTER */
#site-footer {
  font-weight: 500;
  padding-bottom: 20px;
}
#site-footer strong {
  font-size: 40px;
}
#site-footer #copyright {
  text-align: center;
}
#site-footer .wrap-lg {
  justify-content: space-evenly;
  gap: 50px 40px;
  flex-wrap: wrap;
  padding: clamp(50px, 1.786rem + 5.95vw, 100px) 4vw;
}
#site-footer .wrap-lg, #site-footer .wrap-lg :is(div, nav) {
  align-items: start;
}
@media (max-width: 600px) {
  #site-footer .wrap-lg {
    flex-direction: column;
    padding-inline: 7vw;
  }
}
#site-footer .wrap-lg > div {
  gap: 30px;
}
@media (min-width: 601px) {
  #site-footer .wrap-lg > div {
    flex-basis: 300px;
  }
}
#site-footer .wrap-lg > nav {
  gap: 10px 50px;
}
@media (max-width: 1100px) {
  #site-footer .wrap-lg > nav {
    flex-direction: column;
  }
}
#site-footer .wrap-lg #social-links {
  gap: 40px;
}
#site-footer .wrap-lg svg {
  width: 24px;
  height: 24px;
}

.wrap-sm {
  width: min(100%, 900px);
  margin: auto;
}

.wrap {
  width: min(100%, 1024px);
  margin: auto;
}

.wrap-lg {
  width: min(100%, 1275px);
  margin: auto;
}

section {
  --padding-inline: clamp(15px, calc(0.13rem + 3.57vw), 45px);
  --padding-block: clamp(30px, calc(1.34rem + 2.38vw), 50px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-block: var(--padding-block);
  padding-inline: var(--padding-inline);
}
section:first-child > div {
  gap: 20px;
  text-align: center;
}

.flex, section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.flex-col, section {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  gap: 15px;
  list-style: none;
}
@media (max-width: 500px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.grid > * {
  background-color: var(--bg);
  padding: 13% 10% 7%;
  border-radius: var(--radius-large);
  box-shadow: var(--box-shadow);
}
.grid > *::before {
  content: var(--icon, var(--icon-videos));
  margin: 0 12px 16px 0;
  vertical-align: sub;
}
.grid > * p {
  color: var(--dull);
  font-size: var(--fluid-alt-3);
  margin-top: var(--fluid-alt-3);
}

/* DROP-DOWN */
.drop-down {
  position: relative;
}
.drop-down :is(a, button) {
  padding: 12px 20px;
}
.drop-down > button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  z-index: 2;
}
.drop-down > button::after {
  content: var(--icon-chevron);
  transition: transform 0.3s;
}
.drop-down.active > button::after {
  transform: rotate(-180deg);
}
.drop-down > div {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1;
  min-width: 100%;
  width: max-content;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  text-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  transform-origin: top;
  transform: translateX(-50%) scaleY(var(--scale, 0));
  visibility: hidden;
  opacity: 0;
  transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
}
.drop-down > div > :is(*):is(:hover, :focus-visible) {
  background-color: var(--hover);
}
.drop-down.active > div {
  --scale: 1;
  visibility: visible;
  opacity: 1;
}
.drop-down > button.primary + div {
  --bg: #444;
  --hover: #666;
}
.drop-down > button.primary + div > :is(*) {
  color: #fff; /* currentColor */
  border-radius: 0;
  outline-offset: -3px;
}

/* SWITCH */
.switch {
  --width: 55px;
  --height: 25px;
  --padding: 2.5px;
  --color: var(--color-black);
  appearance: none;
  box-sizing: content-box;
  display: grid;
  grid-template-columns: var(--height);
  width: var(--width);
  height: var(--height);
  background-color: var(--color);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 var(--padding) var(--color);
  outline-offset: 2px !important;
  cursor: pointer;
}
.switch::before {
  content: "";
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform 0.2s;
}
.switch:checked::before {
  transform: translateX(calc(var(--width) - 100%));
}

/* ACCORDION */
.accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
@media (max-width: 768px) {
  .accordion {
    grid-template-columns: 1fr;
  }
}
.accordion > div {
  justify-content: flex-start;
  gap: 30px;
  align-items: stretch;
}
.accordion > div > div {
  align-items: stretch;
}
.accordion h2 {
  align-self: start;
  font-size: 20px;
  color: var(--dull);
}
.accordion .accordion-item {
  display: flex;
  flex-direction: column;
}
.accordion .accordion-item > * {
  padding-left: 30px;
}
.accordion .accordion-item .accordion-header {
  position: relative;
  font-size: inherit;
  font-weight: bold;
  text-align: left;
  margin-bottom: 0;
  transition: margin-bottom 0.3s;
}
.accordion .accordion-item .accordion-header::before {
  content: var(--icon-plus);
  position: absolute;
  left: 8px;
}
.accordion .accordion-item.active .accordion-header {
  margin-bottom: 5px;
}
.accordion .accordion-item.active .accordion-header::before {
  content: var(--icon-minus);
}
.accordion .accordion-item .accordion-content {
  height: var(--content-height, 0);
  font-size: 15px;
  overflow: hidden;
  visibility: hidden;
  transition: height 0.3s ease-in-out, visibility 0.3s;
}
.accordion .accordion-item.active .accordion-content {
  visibility: visible;
}