/* ============================================================
   RAID SHADOW LEGENDS - Landing Page Styles
   ============================================================ */

/* --- WP Block Styles (kept for page compatibility) --- */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}

h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}

ol,ul{box-sizing:border-box}:root :where(.wp-block-list.has-background){padding:1.25em 2.375em}

.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}

.wp-block-table{overflow-x:auto}.wp-block-table table{border-collapse:collapse;width:100%}.wp-block-table thead{border-bottom:3px solid}.wp-block-table tfoot{border-top:3px solid}.wp-block-table td,.wp-block-table th{border:1px solid;padding:.5em}.wp-block-table .has-fixed-layout{table-layout:fixed;width:100%}.wp-block-table .has-fixed-layout td,.wp-block-table .has-fixed-layout th{word-break:break-word}.wp-block-table.aligncenter,.wp-block-table.alignleft,.wp-block-table.alignright{display:table;width:auto}.wp-block-table.aligncenter td,.wp-block-table.aligncenter th,.wp-block-table.alignleft td,.wp-block-table.alignleft th,.wp-block-table.alignright td,.wp-block-table.alignright th{word-break:break-word}.wp-block-table .has-subtle-light-gray-background-color{background-color:#f3f4f5}.wp-block-table .has-subtle-pale-green-background-color{background-color:#e9fbe5}.wp-block-table .has-subtle-pale-blue-background-color{background-color:#e7f5fe}.wp-block-table .has-subtle-pale-pink-background-color{background-color:#fcf0ef}.wp-block-table.is-style-stripes{background-color:initial;border-collapse:inherit;border-spacing:0}.wp-block-table.is-style-stripes tbody tr:nth-child(odd){background-color:#f0f0f0}.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd){background-color:#f3f4f5}.wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd){background-color:#e9fbe5}.wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd){background-color:#e7f5fe}.wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd){background-color:#fcf0ef}.wp-block-table.is-style-stripes td,.wp-block-table.is-style-stripes th{border-color:#0000}.wp-block-table.is-style-stripes{border-bottom:1px solid #f0f0f0}.wp-block-table .has-border-color td,.wp-block-table .has-border-color th,.wp-block-table .has-border-color tr,.wp-block-table .has-border-color>*{border-color:inherit}.wp-block-table table[style*=border-top-color] tr:first-child,.wp-block-table table[style*=border-top-color] tr:first-child td,.wp-block-table table[style*=border-top-color] tr:first-child th,.wp-block-table table[style*=border-top-color]>*,.wp-block-table table[style*=border-top-color]>* td,.wp-block-table table[style*=border-top-color]>* th{border-top-color:inherit}.wp-block-table table[style*=border-top-color] tr:not(:first-child){border-top-color:initial}.wp-block-table table[style*=border-right-color] td:last-child,.wp-block-table table[style*=border-right-color] th,.wp-block-table table[style*=border-right-color] tr,.wp-block-table table[style*=border-right-color]>*{border-right-color:inherit}.wp-block-table table[style*=border-bottom-color] tr:last-child,.wp-block-table table[style*=border-bottom-color] tr:last-child td,.wp-block-table table[style*=border-bottom-color] tr:last-child th,.wp-block-table table[style*=border-bottom-color]>*,.wp-block-table table[style*=border-bottom-color]>* td,.wp-block-table table[style*=border-bottom-color]>* th{border-bottom-color:inherit}.wp-block-table table[style*=border-bottom-color] tr:not(:last-child){border-bottom-color:initial}.wp-block-table table[style*=border-left-color] td:first-child,.wp-block-table table[style*=border-left-color] th,.wp-block-table table[style*=border-left-color] tr,.wp-block-table table[style*=border-left-color]>*{border-left-color:inherit}.wp-block-table table[style*=border-style] td,.wp-block-table table[style*=border-style] th,.wp-block-table table[style*=border-style] tr,.wp-block-table table[style*=border-style]>*{border-style:inherit}.wp-block-table table[style*=border-width] td,.wp-block-table table[style*=border-width] th,.wp-block-table table[style*=border-width] tr,.wp-block-table table[style*=border-width]>*{border-style:inherit;border-width:inherit}

.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}

/* --- Fonts --- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- CSS Variables --- */
:root {
  --font-main: 'Lato', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --color-main: #ffd1ac;
  --color-secondary: #fff0e4;
  --color-cta: #f78509;
  --container-width: 1800px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  color: var(--color-main);
  background-color: #000000;
}
body {
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  line-height: 1.3;
  transition: .2s;
}
section, nav, footer {
  display: flex;
  justify-content: center;
  position: relative;
}
.wrapper {
  max-width: calc(var(--container-width) + 70px);
  width: 100%;
  padding: 0 35px;
}
section.full .wrapper {
  max-width: 100%;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-main);
  font-family: var(--font-main);
}
h1 { font-size: 50px; }
h2 { font-size: 40px; }
h3 { font-size: 34px; }
h4 { font-size: 28px; }
h5 { font-size: 22px; }
h6 { font-size: 18px; }

/* --- Buttons --- */
button {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: 400;
  font-family: var(--font-secondary);
  text-transform: capitalize;
  cursor: pointer;
  transition: .2s;
  background-image: linear-gradient(90deg, #f78509, #fa9634);
  border-radius: 12px;
  border: unset;
}
button:not(['disabled']):hover {
  color: var(--color-main);
  border-color: var(--color-main);
}
button:disabled {
  cursor: not-allowed;
  filter: brightness(0.6);
}

/* --- Utilities --- */
.hidden { display: none !important; }
.margin-bottom-100 { margin-bottom: 100px; }

/* --- Scrollbar --- */
::-webkit-scrollbar { background-color: transparent; width: 8px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--color-cta); border-radius: 16px; border: 4px solid transparent; }
::-webkit-scrollbar-button { display: none; }

/* --- Background Blobs --- */
.blob {
  height: 1000px;
  position: absolute;
  filter: blur(200px);
  -webkit-backdrop-filter: blur(200px);
  max-width: 100%;
}
.blob-1 { top: -40%; left: -10%; opacity: 0.7; }
.blob-2 { right: 0; opacity: 0.5; top: 100px; }
.blob-3 { left: 200px; opacity: 0.5; top: 400px; max-width: calc(100% - 200px); }

/* --- Navigation --- */
nav { z-index: 3; position: relative; }
nav .toggler { display: none; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav .menu { display: flex; justify-content: flex-end; gap: 70px; margin-block: 30px; }
nav .menu-item { position: relative; }
nav .menu-item:not(.menu-item-has-children)::after {
  content: '';
  background-color: var(--color-main);
  display: block;
  height: 3px;
  width: 0%;
  transition: .2s;
  border-radius: 100px;
}
nav .menu-item:hover::after { width: 100%; }
nav .menu-item a { color: var(--color-secondary); text-decoration: none; font-size: 20px; font-weight: 200; }
nav .current-menu-item::after { width: 100% !important; }
nav .current-menu-item a { color: var(--color-main); font-weight: 400; }
nav .menu-item-has-children { position: relative; }
nav .sub-menu {
  position: absolute;
  border-radius: 12px;
  padding: 10px 15px;
  background: linear-gradient(150deg, hsl(31.25deg 78.56% 25.7%), #000000);
  transition: .2s;
  transform: scale(0);
  z-index: 1;
  min-width: 100%;
}
nav .menu-item-has-children:hover .sub-menu { transform: scale(1); }
nav .sub-menu .menu-item { margin-bottom: 10px; }

/* --- Footer --- */
footer { margin-top: 50px; }
footer .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(150deg, hsl(38.37deg 18.2% 16.75% / 95%), #000000);
}
footer .menu { list-style-type: none; margin: 0; padding: 0; display: flex; gap: 80px; margin-bottom: 30px; }
footer .menu li { text-align: center; }
footer .menu a { color: var(--color-main); text-decoration: none; font-size: 18px; }

/* --- Content Section --- */
.content { margin-top: 50px; word-break: break-word; }
.content.less-margin { margin-top: 20px; }
.content .content-limit { max-width: 800px; margin-inline: auto; }
.content h2, .content h3 { margin-top: 70px; }
.content p { font-size: 18px; line-height: 2; }
.content li { font-size: 18px; margin-bottom: 15px; }
.content strong { color: var(--color-cta); }
.content a { color: var(--color-cta); }
.content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--color-cta); }
.content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) a { color: var(--color-secondary); }
.content .no-link-break a { word-break: initial; }

/* --- First Section --- */
.first-section { margin-bottom: 60px; }
.first-section .wrapper { z-index: 1; }
.first-section .game-logo {
  position: absolute;
  z-index: -1;
  opacity: .05;
  transform: rotate(-90deg);
  width: 100vh;
  bottom: -20%;
  right: -90vh;
  transform-origin: bottom left;
  transition: .2s;
}
.first-section .title { max-width: 900px; margin-inline: auto; text-align: center; line-height: 1.2; font-size: 60px; margin-block: 0; }
.first-section .subtitle { max-width: 720px; text-align: center; margin-inline: auto; }
.first-section h2.steps-title { position: relative; margin-top: 60px; }
.first-section h2::after {
  content: '';
  background-color: var(--color-cta);
  position: absolute;
  height: 5px;
  width: 10%;
  z-index: -1;
  border-radius: 100px;
  bottom: -5px;
  left: 0;
}
.first-section .steps-title .button {
  border: 1px solid var(--color-cta);
  border-radius: 12px;
  display: none;
  font-size: 20px;
  font-family: var(--font-secondary);
  font-weight: 200;
  padding: 5px 15px;
  cursor: pointer;
  color: var(--color-main);
  position: relative;
  z-index: 1;
  transition: .2s;
}
.first-section .steps-title .button:not(.active):hover { transform: scale(1.05); }
.first-section .steps-title .button.active { background-color: var(--color-cta); }
.first-section .steps { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 25px; }
.first-section .step {
  flex: 0 200px;
  height: 150px;
  background: linear-gradient(150deg, hsl(var(--angle) 18.2% 16.75% / 60%), #00000060);
  border-radius: 12px;
  padding: 10px 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  transition: .2s;
}
.first-section .step.transparent { height: 0; margin: 0; padding: 0; flex: 0 200px; }
.first-section span {
  position: absolute;
  font-family: var(--font-main);
  font-size: 170px;
  color: hsl(var(--angle) 18.2% 16.75% / 60%);
  z-index: -1;
  left: 10px;
}

/* --- Controls --- */
.controls { display: flex; gap: 20px; justify-content: center; }

/* --- Notification --- */
.notification { z-index: 1; position: relative; }
.notification .background { background: linear-gradient(150deg, hsl(31deg 93.75% 12.55%), #000000); border-radius: 12px; padding: 10px 20px; }
.notification h1, .notification h2, .notification h3, .notification h4, .notification h5, .notification h6 { margin-top: 0; }

/* --- Receive List / Locker Button --- */
.receive-list h2 { margin-bottom: 20px; }
.receive-list h5 { font-size: 18px; margin-bottom: 0; display: inline-block; }
.receive-list .list { display: inline-block; }
.receive-list .name { margin: 0; display: inline; }
.receive-list .promocode { font-family: var(--font-main); padding-inline: 10px; }
.receive-list ul { margin: 0; margin-bottom: 30px; }
.receive-list li { margin: 0; }
.receive-list .buttons { display: flex; gap: 10px; justify-content: center; }

button[data-copy]:not(:disabled) {
  animation: moglow 2s infinite ease-in-out;
  background: #25b425;
}
button[data-copy].mo-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}
button[data-copy].mo-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: mospin 1s linear infinite;
}

/* --- SweetAlert2 Popup --- */
.md-popup { background: rgb(67, 36, 9) !important; border: 1px solid #f78509 !important; display: block !important; }
.md-popup .swal2-html-container { color: var(--color-secondary) !important; }
.md-popup .swal2-title { color: var(--color-main) !important; }
.md-popup .swal2-close { position: absolute; right: 10px; top: 20px; }
.swal2-container { min-width: 480px !important; }

/* --- Hero Cards Section --- */
.hero-cards-title {
  font-weight: 900;
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}
.hero-cards-title::before {
  content: '';
  background-color: var(--color-cta);
  opacity: 0.15;
  width: calc(100% + 40px);
  height: calc(100% + 28px);
  z-index: -1;
  position: absolute;
  top: -10px;
  transform: translateX(-20px);
  border-radius: 12px;
}
.hero-cards-title::after {
  content: '';
  background-color: var(--color-cta);
  position: absolute;
  height: 5px;
  width: 10%;
  z-index: -1;
  border-radius: 100px;
  bottom: -5px;
  left: 0;
}
.hero-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-block: 10px 40px;
  z-index: 1;
}
.hero-cards .hero-card {
  flex: 0 0 180px;
  cursor: pointer;
  transition: 1s;
  border-radius: 12px;
  position: relative;
  margin-right: 162px;
  z-index: 1;
  transform: scale(.7);
}
.hero-cards .hero-card:hover { transform: scale(1); transition: .2s; z-index: 4; }
.hero-cards .hero-card.selected { position: relative; transform: scale(1.05); }
.hero-cards .hero-card.selected .hero-image { filter: brightness(2); }
.hero-cards-section .hero-cards .hero-card.selected::before {
  content: url('images/check.svg');
  position: absolute;
  height: 50px;
  aspect-ratio: 1;
  background-color: #25b425;
  color: white;
  z-index: 1;
  border-radius: 100%;
  padding: 7px;
  right: -15px;
  top: -15px;
}
.hero-cards .hero-card.recomended, .hero-cards .hero-card.new { order: -1; }
.hero-cards .hero-card.recomended::after, .hero-cards .hero-card.new::before {
  position: absolute;
  height: 60px;
  aspect-ratio: 1;
  color: white;
  transform: rotate(-25deg);
}
.hero-cards .hero-card.recomended::after {
  content: url('/wp-content/themes/moduletd/assets/img/icons/crown.svg');
  z-index: 1;
  left: -28px;
  top: -41px;
}
.hero-cards .hero-card.new::before {
  content: url(/wp-content/themes/moduletd/assets/img/icons/new-badge.svg);
  z-index: 0;
  top: -50px;
  left: -45px;
}
.hero-cards .hero-card.disabled { box-shadow: unset; background-color: unset; transform: unset; opacity: 0.4; filter: sepia(1); display: none; }
.hero-cards.has-selected { gap: 0; }
.hero-cards.has-selected .hero-card.selected { order: -2; }
.hero-cards.has-selected .hero-card:not(.selected) { transform: scale(0); flex-basis: 0; transition: .2s; height: 0; }
.hero-cards .hero-image-container {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: double 5px transparent;
  background-image: linear-gradient(black, black), conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.hero-cards .recomended .hero-image-container { background-image: linear-gradient(black, black), conic-gradient(from 0deg, #ffb400, #ffb400); }
.hero-cards .new .hero-image-container { background-image: linear-gradient(black, black), conic-gradient(from 0deg, #ff0000, #ff0000); }
.hero-cards .recomended .hero-image-container::before, .hero-cards .new .hero-image-container::before { position: absolute; top: 0; border-radius: 0 0 9px 0; padding-inline: 10px; }
.hero-cards .recomended .hero-image-container::before { content: 'Recommended'; background: #ffb400; }
.hero-cards .new .hero-image-container::before { content: 'New'; background: #ff0000; }
.hero-cards .selected .hero-image-container { background-image: linear-gradient(black, black), conic-gradient(from 0deg, #25b425, #25b425); }
.hero-cards .hero-image { display: block; width: 100%; aspect-ratio: 83/108; object-fit: cover; transition: .2s; }
.hero-cards h3 {
  position: absolute;
  color: white;
  bottom: 0;
  padding-left: 20px;
  background: #0000008c;
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  text-transform: capitalize;
  font-family: var(--font-secondary);
  font-weight: 300;
  padding-block: 10px;
  font-size: 20px;
}
.hero-cards .resources {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  position: absolute;
  left: 100%;
  top: 12%;
  margin: 0;
  border-radius: 0 20px 20px 0;
  padding: 20px;
  background: linear-gradient(150deg, hsl(var(--angle) 18.2% 16.75%), #000000);
  width: 162px;
}
.hero-cards .selected .resources { background: linear-gradient(150deg, hsl(var(--angle) 18.2% 40%), #000000); }
.hero-cards .resource-image { aspect-ratio: 1/1; height: 55px; background: hsl(var(--angle) 18.2% 16.75%); display: block; overflow: hidden; border-radius: 12px; object-fit: cover; }
.hero-cards .resource-image-wrapper { position: relative; }
.hero-cards .resource-image-wrapper .amount {
  position: absolute;
  background: red;
  font-size: 12px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 100px;
  top: 4px;
  right: 4px;
}
.hero-cards::-webkit-scrollbar { display: none; }

/* --- Animations --- */
@keyframes moglow {
  0%   { box-shadow: 0 0 10px #25b425; }
  50%  { box-shadow: 0 0 25px #25b425; }
  100% { box-shadow: 0 0 10px #25b425; }
}
@keyframes mospin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes hint-scroll {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-15px); }
}

/* --- Responsive --- */
@media screen and (max-width: 1920px) { .first-section .title { font-size: 48px; } }

@media screen and (max-width: 1840px) { .hero-cards::-webkit-scrollbar { display: inherit !important; } }

@media screen and (max-width: 992px) {
  nav .menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 100% !important;
    height: 100vh !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    z-index: 999;
    gap: 30px;
    background: linear-gradient(150deg, hsl(38.37deg 18.2% 16.75% / 95%), #000000);
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 100px;
    padding-inline: 40px;
    margin-top: 0;
  }
  nav .toggler.active + .menu,
  nav .toggler.active ~ .menu {
    right: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  nav .toggler {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 10000;
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(150deg, hsl(38.37deg 18.2% 16.75% / 95%), #000000);
  }
  nav .toggler.active { background: transparent; }
  nav .toggler span,
  nav .toggler span::before,
  nav .toggler span::after {
    position: relative;
    display: block;
    background: var(--color-main);
    width: 32px;
    height: 3px;
    border-radius: 100px;
    transition: .2s;
  }
  nav .toggler.active span { background: transparent; }
  nav .toggler.active span::before, nav .toggler.active span::after { top: 0; bottom: 0; transform: rotate(45deg); }
  nav .toggler.active span::after { transform: rotate(-45deg); }
  nav .toggler span::before, nav .toggler span::after { content: ''; position: absolute; }
  nav .toggler span::before { top: -11px; }
  nav .toggler span::after { bottom: -11px; }
  nav .sub-menu { transform: scale(1); background: transparent; border-left: 1px solid var(--color-cta); border-radius: 0 0 0 12px; }
  footer .menu { flex-direction: column; gap: 30px; }
}

@media screen and (max-width: 768px) {
  .first-section .steps-title .button { display: inline-flex; }
  .first-section .steps { height: 0; }
  .first-section .steps.active { height: auto; }
  .first-section .step { height: 0; transform: scale(0); }
  .first-section .steps.active .step { height: auto; min-height: 150px; transform: scale(1); }
  .first-section .steps.active .step.transparent { height: 0; min-height: 0; }
  .hero-cards { gap: 60px 20px; }
  .hero-cards .hero-card { transform: scale(1); }
}

@media screen and (max-width: 650px) {
  .content p { font-size: 16px; }
  .blob { filter: blur(160px); -webkit-backdrop-filter: blur(160px); }
  .first-section .title { font-size: 32px; margin-top: 20px; }
  .first-section h2.steps-title { font-size: 24px; }
  .hero-cards-title { font-size: 24px; }
}

@media screen and (max-width: 510px) {
  .blob { filter: blur(130px); -webkit-backdrop-filter: blur(130px); }
  .swal2-container { min-width: initial !important; }
}

@media screen and (max-width: 500px) {
  .hero-cards {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-right: 40px;
    flex-wrap: nowrap !important;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .hero-cards::-webkit-scrollbar, .hero-cards-wrapper::-webkit-scrollbar { display: none !important; }
  .hero-card { flex: 0 0 45% !important; scroll-snap-align: start; }
  .hero-cards .hero-card.selected::before {
    content: url(images/check.svg) !important;
    height: 40px !important;
    width: 40px !important;
    background-color: #25b425;
    color: white;
    z-index: 1;
    border-radius: 100%;
    padding: 7px;
    right: -15px !important;
    top: -10px !important;
    left: initial !important;
    transform: none !important;
  }
  .hero-cards .hero-card:not(.selected)::before, .hero-cards .hero-card.recomended::after { display: none; }
  .hero-cards-wrapper { position: relative; }
  .hero-cards-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, transparent, #1a0a00);
    z-index: 2;
  }
  .hero-cards-section .wrapper { max-width: 100%; padding-right: 0 !important; }
  .hero-cards-title::before { width: 100% !important; }
  .hero-cards .hero-card.selected { transform: scale(1) !important; }
  .hero-cards.has-selected .hero-card.new.selected,
  .hero-cards.has-selected .hero-card.recomended.selected { order: -1; }
  .hero-cards.has-selected .hero-card.selected:not(.recomended, .new) { order: unset; }
  .hero-cards-section .hero-cards .hero-card.disabled { display: block; }
  .hero-cards > *:first-child { animation: hint-scroll 1s ease-in-out 0.5s 2; }
  .hero-cards .resources.big { top: 0% !important; border-radius: 20px !important; }
  .hero-cards.has-selected { gap: 60px 20px !important; }
  .hero-cards.has-selected .hero-card:not(.selected) { transform: scale(1) !important; flex-basis: 45% !important; height: auto !important; }
}

@media screen and (max-width: 470px) {
  .first-section .step { flex: 0 160px; padding: 10px; font-size: 14px; }
}

@media screen and (max-width: 390px) {
  .first-section .step { flex: 0 100%; font-size: 16px; }
}