/* GLOBAL */

:root {
    --accent-color: #D1FF54;
    --accent-color-translucent: #D1FF5420;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

body {
    font-family: "Albert Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #FFF;
    background-color: #010101;
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

main {
    flex: 1 0 auto;
}

a,
.link {
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: none;
}

a:visited {
    color: var(--accent-color);
}

a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

section {
    margin: 12rem 0;
}

@media (max-width: 992px) {
    section {
        margin: 10rem 0;
    }
}

@media (max-width: 768px) {
    section {
        margin: 8rem 0;
    }
}

@media (max-width: 576px) {
    section {
        margin: 5rem 0;
    }
}

/* HEADER */

header {
    color: #FFF;
    padding: 2rem 0;
}

header .logo a {
    color: #000;
    text-decoration: none;
}

.navigation-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navigation-menu a,
.navigation-menu a:visited {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.25s, text-decoration-color 0.25s;
}

.navigation-menu a:hover {
    color: #D1FF54;
    text-decoration: none;
}

.menu-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    color: currentColor;
    fill: currentColor;
    stroke: currentColor;
}

.menu-open {
    display: block;
}

.menu-close {
    display: none;
}

.navbar-toggler {
    color: inherit;
    border: 0;
    background: transparent;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:not(.collapsed) .menu-open {
    display: none;
}

.navbar-toggler:not(.collapsed) .menu-close {
    display: block;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

@media (max-width: 992px) {
    header {
        padding: 1.5rem 0;
    }

    .navigation-menu a,
    .navigation-menu a:visited {
        font-size: 0.9375rem;
    }
}

@media (max-width: 768px) {
    header {
        padding: 1rem 0;
    }
}

@media (max-width: 576px) {
    header {
        padding: 0.75rem 0;
    }
}

/* FOOTER */

footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #010101;
    color: #BBB;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.nav-link {
    color: #BBB;
    font-weight: 500;
    text-decoration: none;
}

.nav-link:hover {
    color: #BBB;
    text-decoration: underline;
}

.nav-link:visited {
    color: #BBB;
}

.nav .nav-item:not(:last-child) {
    border-right: 2px solid #333;
}

.socials-icon {
    color: var(--accent-color);
    border-radius: 50%;
    transition: background-color 0.3s;
}

.socials-icon:hover {
    background-color: var(--accent-color-translucent);
}

@media (max-width: 768px) {
    footer {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .nav .nav-item:not(:last-child) {
        border-right: none;
    }
}

/* HERO */

.icon-quote {
    display: block;
    margin-bottom: 1rem;
    color: var(--accent-color-translucent);
}

.hero-title {
    font-size: 4.625rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    color: var(--accent-color);
}

.hero-title-gradient {
    background: linear-gradient(150deg, #F1FF0F 10%, #85FFBC 40%, #3CFF82 70%);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.375rem;
    font-weight: 400;
    color: #FFF;
}

@media (max-width: 992px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }
}

/* SECTION TITLE */

.section-title {
    font-size: 7.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--accent-color);
}

.section-title-gradient {
    background: linear-gradient(90deg, #BEFF53, #91FFAD, #57FF89);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

@media (max-width: 992px) {
    .section-title {
        font-size: 5rem;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 3rem;
    }
}

/* SECTION SUBTITLE */

.section-subtitle {
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 150%;
    color: #FFF;
    text-align: center;
}

@media (max-width: 992px) {
    .section-subtitle {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .section-subtitle {
        font-size: 1.125rem;
    }
}

@media (max-width: 576px) {
    .section-subtitle {
        font-size: 1rem;
    }
}

/* SECTION CAPTION */

.section-caption {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 140%;
    margin: 0 auto;
    text-transform: uppercase;
}

@media (max-width: 992px) {
    .section-caption {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .section-caption {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .section-caption {
        font-size: 0.875rem;
    }
}

/* SUBSECTION TITLE */

.subsection-title {
    font-size: 4.75rem;
    font-weight: 700;
    line-height: 120%;
    color: var(--accent-color);
    text-align: start;
}

@media (max-width: 992px) {
    .subsection-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .subsection-title {
        font-size: 3rem;
    }
}

@media (max-width: 576px) {
    .subsection-title {
        font-size: 2rem;
    }
}

/* BADGE BUTTON */

.badge-btn {
    display: inline-block;
    overflow: hidden;
    border-radius: 0.5rem;
    width: 160px;
    height: 54px;
    transition: transform 1s ease;
}

.badge-btn img {
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
}

.badge-btn:hover {
    transform: scale(1.02);
}

/* IMAGE EFFECTS */

.scaling-img {
    transition: transform 2s ease;
}

.scaling-img:hover {
    transform: scale(1.02);
}

/* FEATURES */

.phone-mockup {
    max-height: 800px;
}

.feature-title {
    font-size: 4rem;
    font-weight: 700;
    color: #FFF;
}

.feature-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.feature-text {
    font-size: 1rem;
    color: #CCC;
    line-height: 1.5;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .feature-title {
        font-size: 2.5rem;
    }

    .feature-subtitle {
        font-size: 1.125rem;
    }

    .feature-text {
        font-size: 0.9375rem;
    }
}

@media (max-width: 768px) {
    .feature-title {
        font-size: 2rem;
    }

    .feature-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .phone-mockup {
        max-height: 600px;
    }
}

/* BANNER */

.banner-full-width {
    display: block;
    width: 100%;
    background: var(--accent-color);
    color: #000;
    border: none;
    text-decoration: none;
}

.banner-full-width .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (max-width: 576px) {
    .banner-full-width .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

.banner-full-width-gradient {
    background: linear-gradient(135deg, #DFFF00, #00FF7F);
}

.banner-logo {
    width: 200px;
    height: 200px;
}

.banner-icon {
    transition: transform 2s ease;
}

.banner-icon:hover {
    transform: scale(1.02);
}

.banner-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 140%;
    text-transform: uppercase;
}

.banner-subtitle {
    font-size: 1rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .banner-title {
        font-size: 1rem;
    }

    .banner-subtitle {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .banner-title {
        font-size: 0.875rem;
    }

    .banner-logo {
        width: 80px;
        height: 80px;
    }
}

/* POWERED BY */

.powered-title {
    font-size: 1rem;
    font-weight: 400;
    color: #FAFBFF;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.powered-logo {
    max-height: 60px;
    width: auto;
}

@media (max-width: 768px) {
    .powered-title {
        font-size: 0.75rem;
    }
}

/* CARDS */

.card {
    display: block;
    background-color: #111;
    border: 1px solid #222;
    border-radius: 1.25rem;
    color: #FFF;
    text-decoration: none;
}

.card-hover {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 60px var(--accent-color-translucent);
    text-decoration: none;
    color: inherit;
}

.card-gradient {
    background: linear-gradient(150deg, #DFFF00 25%, #85FFBC, #00FF7F);
    color: #000;
}

.card-gradient .card-title {
    color: #000;
}

.card-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 auto;
    text-transform: uppercase;
}

.card-subtitle {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .card-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .card-title {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .card-logo {
        width: 120px;
        height: 120px;
    }
}

/* PRODUCT CARDS */

.product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
}

.product-card-icon {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card-title {
    color: #FFF;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
}

.product-card-subtitle {
    color: #BBB;
    font-size: 1rem;
    font-weight: 400;
}

.product-card-link {
    color: #FFF;
    font-size: 1rem;
    font-weight: 500;
}

.product-card:hover .product-card-link,
.product-card:focus-within .product-card-link {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .product-card-icon {
        width: 100px;
        height: 100px;
    }

    .product-card-title {
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
    .product-card-icon {
        width: 80px;
        height: 80px;
    }

    .product-card-title {
        font-size: 1rem;
    }

    .product-card-subtitle,
    .product-card-link {
        font-size: 0.875rem;
    }
}

/* CTA BUTTON */

.cta-btn {
    display: inline-block;
    background: linear-gradient(270deg, #F1FF0F, #3CFF82, #85FFBC, #F1FF0F);
    background-size: 400% 400%;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    text-decoration: none;
    box-shadow: 0px 0px 20px #3CFF8210;
    border: none;
    transform-origin: center;
    will-change: transform;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    animation: gradientMove 10s ease infinite;
}

.cta-btn:hover {
    color: #000;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0px 10px 60px #3CFF8270;
}

.cta-btn:visited {
    color: #000;
}

.cta-btn:active {
    transform: translateY(1px);
}

.cta-btn-dark {
    background: #000;
    color: #FFF;
}

.cta-btn-dark span {
    background: linear-gradient(90deg, #F1FF0F, #85FFBC, #3CFF82);
    background-size: 300%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: inline-block;
    animation: gradientMove 5s ease infinite;
}

.cta-btn-dark:hover {
    box-shadow: 0px 10px 60px #DFFF00;
}

@media (max-width: 768px) {
    .cta-btn {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}/* GLOBAL OVERRIDES */

:root {
    --accent-color: #25C8FF;
    --accent-color-translucent: #25C8FF20;
}

/* HEADER */

header .nav-link {
    color: #000;
    text-shadow: 0 0 4px #25C8FF;
}

header .nav-link:hover {
    color: #000;
}

header .nav-link:visited {
    color: #000;
}

.navbar-toggler .menu-icon {
    color: #000;
    fill: #000;
    stroke: #000;
    filter: drop-shadow(0 0 4px #25C8FF);
}

/* HERO */

.hero-bolt-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: var(--hero-bolt-height, auto);
    max-width: none;
    z-index: -1;
    pointer-events: none;
    object-fit: contain;
}

#hero {
    position: relative;
    z-index: 1;
}

.hero-content {
    position: relative;
}

.hero-content-base {
    position: relative;
    z-index: 1;
}

.hero-content-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #000;
    pointer-events: none;
    display: none;
}

.hero-content-mask * {
    color: #000 !important;
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    .hero-content-mask {
        display: block;
        --mask-url: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgdmlld0JveD0nMCAwIDEwMjQgMTAyNCcgd2lkdGg9JzUxMicgaGVpZ2h0PSc1MTInPjxzdHlsZT48L3N0eWxlPjxwYXRoICBkPSdtODc4IDk3LjFjLTIuNSAwLjUtNy4yIDIuMi0xMC41IDMuNi0zLjMgMS41LTYuMiAzLTYuNSAzLjMtMC4zIDAuNC0xLjQgMS0yLjUgMS41LTEuMSAwLjQtMi4yIDAuOS0yLjUgMS0wLjMgMC4xLTIuMiAxLTQuMyAyLjEtMiAxLTMuNyAyLjItMy43IDIuNyAwIDAuNC0wLjUgMC41LTEgMC4yLTAuNS0wLjMtMS41IDAuMi0yIDEtMC41IDAuOC0xLjMgMS4zLTEuOCAxLjEtMC40LTAuMy0yLjEgMC42LTMuNyAyLTEuNiAxLjQtNC4yIDIuOS01LjggMy4yLTEuNSAwLjQtMi43IDEtMi43IDEuNSAwIDAuNC0wLjkgMC43LTIgMC43LTEuMSAwLTIuMiAwLjMtMi40IDAuOC0wLjIgMC40LTMuMiAyLjItNi43IDQtMy41IDEuOC04IDQuMi05LjkgNS4zLTEuOSAxLjEtNC40IDIuNS01LjUgMy4yLTEuMSAwLjYtMi40IDEuMS0yLjggMS4yLTAuNCAwLTEuMSAwLjUtMS41IDEuMS0wLjQgMC41LTIuMyAxLjYtNC4yIDIuNC0xLjkgMC43LTQuMiAxLjktNSAyLjYtMC44IDAuNy0yLjEgMS40LTIuOSAxLjYtMC44IDAuMi0zLjkgMS43LTcgMy41LTMuMSAxLjctOSA0LjktMTMuMSA3LTQuMSAyLjEtNy43IDQuMS04IDQuNS0wLjMgMC41LTEuMiAwLjktMi4xIDEuMS0wLjkgMC4xLTIuMiAwLjctMyAxLjMtMC44IDAuNi0yLjUgMS41LTMuOSAxLjktMS40IDAuNS0zLjEgMS40LTMuOCAyLjItMC43IDAuNy0yIDEuMy0yLjggMS4zLTAuOCAwLTEuNCAwLjMtMS40IDAuOCAwIDAuNC0yLjMgMS44LTUuMiAzLjItMi45IDEuNC01LjUgMi43LTUuOCAzLTAuMyAwLjMtMi41IDEuNi01IDIuOC0yLjUgMS4zLTUuNiAzLTcgMy43LTEuNCAwLjctMy45IDEuOS01LjUgMi42LTEuNiAwLjgtNC44IDIuNi03IDQuMS0yLjIgMS40LTUuOSAzLjMtOC4zIDQuMi0yLjMgMC45LTQuMiAyLTQuMiAyLjYgMCAwLjYtMS43IDEuNy0zLjcgMi42LTIuMSAwLjgtNi45IDMuMi0xMC44IDUuMy0zLjkgMi0xMC4xIDUuNS0xNCA3LjYtMy45IDIuMS0xMC44IDYtMTUuNSA4LjctNC43IDIuNy0xMS45IDYuNS0xNiA4LjYtNC4xIDItNy43IDQtOCA0LjQtMC4zIDAuNC0zIDIuMS02IDMuOC0zIDEuNi02LjQgMy40LTcuNSAzLjktMS4xIDAuNS00LjQgMy03LjQgNS43LTIuOSAyLjctNi4yIDYuOC03LjIgOS4yLTEuMSAyLjMtMS45IDUuNC0xLjkgNyAwIDEuNSAwLjkgNC41IDEuOSA2LjcgMS40IDIuOCA0IDUuNCA4LjggOC42IDMuNyAyLjYgMTMuOCA4LjMgMjIuMyAxMi43IDEyLjkgNi43IDE1LjggOC42IDE3LjIgMTEuNCAwLjkgMS44IDEuNyA0LjQgMS44IDUuOCAwIDEuNi0zLjQgNy42LTkgMTYtNSA3LjQtMTEuOSAxNy4zLTE1LjMgMjItMy40IDQuNy0xMy43IDE4LjQtMjIuOCAzMC41LTkuMiAxMi4xLTIxLjEgMjcuOS0yNi42IDM1LTUuNCA3LjEtMTguOCAyNC43LTI5LjggMzktMTAuOSAxNC4zLTIyLjMgMjkuMS0yNS4zIDMzLTMgMy45LTEzLjcgMTcuOC0yMy44IDMxLTEwLjEgMTMuMi0yMi43IDI5LjYtMjguMSAzNi41LTUuNCA2LjktMTAuNiAxMi42LTExLjYgMTIuOC0wLjkgMC4xLTMuNy0xLjUtNi4yLTMuNS0yLjUtMi4xLTguOS04LjEtMTQuMy0xMy4zLTUuMy01LjItMTQuNC0xMy44LTIwLjItMTkuMS01LjgtNS4zLTEyLjMtMTEuMS0xNC41LTEzLTIuMi0xLjktNC41LTMuOC01LjEtNC40LTAuNi0wLjYtNS43LTUuMy0xMS41LTEwLjUtNS43LTUuMi0xMi0xMS4xLTEzLjktMTMtMS45LTEuOS05LjEtOC41LTE1LjktMTQuNS02LjgtNi4xLTE0LjUtMTIuNi0xNy0xNC41LTIuNS0yLTYuMy00LjUtOC4zLTUuOC0yLjEtMS4yLTcuNS0yLjktMTItMy43LTQuNi0wLjgtMTAuOC0xLjUtMTMuOC0xLjUtMyAwLTguMiAwLjktMTEuNSAyLTMuNyAxLjMtNy41IDMuNS05LjggNS44LTIuMSAyLTcuMSA4LTExLjEgMTMuMi00IDUuMi0xMC43IDE0LjYtMTQuOSAyMC44LTQuMiA2LjEtNy43IDExLjUtNy43IDEyIDAgMC40LTQuMSA2LjgtOS4yIDE0LjItNSA3LjQtMjAgMjkuMi0zMy4yIDQ4LjMtMTMuMyAxOS4xLTI3LjkgNDAuMy0zMi41IDQ3LTQuNiA2LjctMTQuMyAyMC43LTIxLjUgMzEuMi03LjEgMTAuNS0xNy43IDI2LTIzLjUgMzQuNS01LjkgOC42LTE3LjEgMjUuMS0yNS4xIDM2LjgtOCAxMS43LTE5LjIgMjguMS0yNC45IDM2LjUtNS43IDguMy0xNC45IDIyLTIwLjQgMzAuMi01LjYgOC4zLTEzLjIgMTguOC0xNi45IDIzLjUtMy44IDQuNy04LjEgMTEtOS42IDE0LTEuNSAzLTIuNyA3LjEtMi42IDkgMCAxLjkgMC45IDUuMyAyIDcuNCAxIDIuMiAzLjkgNiA2LjQgOC41IDIuNSAyLjYgMTQuNCAxNC4yIDI2LjUgMjUuOCAxMi4xIDExLjcgMjQuNyAyMy4zIDI4IDI1LjggMy4zIDIuNSA3LjggNSAxMCA1LjcgMi4yIDAuNiA4LjMgMS4yIDEzLjUgMS4yIDcgMCAxMS4zLTAuNiAxNi41LTIuMiAzLjktMS4xIDktMy40IDExLjUtNSAyLjUtMS41IDYuOS01LjMgOS44LTguMyAyLjktMi45IDEwLTEyLjEgMTUuOS0yMC40IDUuOS04LjIgMTMtMTguMSAxNS44LTIyIDIuOS0zLjkgNi45LTkuNSA5LjEtMTIuNSAyLjEtMyA1LjQtNy44IDcuNC0xMC42IDEuOS0yLjggMTIuNy0xOC4xIDIzLjktMzQgMTEuMi0xNS45IDIyLjctMzIuMSAyNS41LTM2LjEgMi44LTQgOC44LTEyLjUgMTMuNC0xOSA0LjYtNi41IDEzLjgtMTkuNCAyMC40LTI4LjggNi42LTkuNCAxNC43LTIwLjggMTcuOS0yNS41IDMuMy00LjcgOC4xLTExLjYgMTAuOC0xNS41IDIuNy0zLjkgNS40LTcuNiA2LTguMiAwLjYtMC43IDEuMS0xLjggMS4xLTIuMyAwLTAuNSAwLjQtMSAxLTEgMC42IDAgMS4yLTAuOCAxLjUtMS43IDAuMy0xIDIuNS00IDQuOS02LjhsNC40LTVjOC45IDcuOCAxMy4xIDExLjQgMTUuMSAxMyAyLjEgMS42IDYuOSA1LjcgMTAuNyA5LjEgMy44IDMuNCAxNC45IDEzIDI0LjggMjEuNSA5LjggOC41IDE5LjUgMTYuOCAyMS41IDE4LjQgMiAxLjYgMTMuMSAxMS4xIDI0LjYgMjEgMTEuNSA5LjkgMjMuNyAyMC4yIDI3IDIyLjggMy4zIDIuNyA4LjcgNi40IDEyIDguMiAzLjMgMS44IDguNyA0LjEgMTIgNSA0LjMgMS4yIDguNiAxLjYgMTUuMSAxLjQgOC4zLTAuNCA5LjktMC44IDE3LTQuNCA3LTMuNSA4LjktNS4yIDE2LjktMTQuNiA0LjktNS44IDEwLjctMTIuOCAxMi43LTE1LjUgMi4xLTIuNyAxNC43LTE5LjEgMjgtMzYuNCAxMy4zLTE3LjMgMzIuMy00Mi4xIDQyLjItNTUgOS45LTEyLjkgMjIuOC0yOS42IDI4LjYtMzcuMSA1LjgtNy41IDE2LjEtMjEgMjMtMzAgNi45LTkgMTcuNy0yMy4xIDI0LTMxLjQgNi4zLTguMiAxNi43LTIyIDIzLjItMzAuNSA2LjUtOC41IDE2LTIwLjkgMjEtMjcuNSA1LjEtNi42IDE0LjEtMTguNSAyMC4xLTI2LjUgNi4xLTggMTYuNy0yMS45IDIzLjYtMzEgNi45LTkgMTQuNC0xOC4zIDE2LjYtMjAuNyAyLjItMi4zIDQuNy00LjMgNS41LTQuMyAwLjggMCA2LjUgMy4zIDEyLjUgNy4zIDYgNC4xIDE0LjQgOS43IDE4LjUgMTIuNSA0LjEgMi44IDkuOCA2LjEgMTIuNSA3LjMgMy4zIDEuNSA2LjggMi4zIDEwLjUgMi4zIDMtMC4xIDYuNS0wLjYgNy44LTEuMiAxLjItMC43IDIuMi0xLjggMi4yLTIuNCAwLTAuNyAxLjEtMi41IDIuNS00IDEuNC0xLjYgMi4zLTIuOCAyLTIuOC0wLjMgMCAwLTEgMC43LTIuMiAwLjctMS4zIDEuMy0yLjUgMS40LTIuOCAwLTAuMyAwLjMtMS4yIDAuNy0yIDAuMy0wLjggMS4xLTQgMS43LTcgMC41LTMgMS4yLTcuNyAxLjUtMTAuNSAwLjMtMi43IDEuMS04LjQgMS45LTEyLjUgMC44LTQuMSA0LjUtMjUuOSA4LjEtNDguNSAzLjYtMjIuNSA3LTQzLjcgNy41LTQ3IDAuNi0zLjMgMS4yLTcuNiAxLjUtOS41IDAuMi0xLjkgMS40LTguNyAyLjUtMTUgMS4xLTYuMyAyLjUtMTQuNiAzLTE4LjUgMC41LTMuOCAyLjEtMTMuNyAzLjUtMjIgMS40LTguMiAzLjItMTkgMy45LTI0IDAuOC00LjkgMy4xLTE4LjcgNS4xLTMwLjUgMi44LTE2LjMgMy42LTIzLjQgMy4zLTI5LjUtMC4zLTQuNi0xLjEtOS4zLTItMTEtMC45LTEuNi0zLjYtNS02LTcuNS0yLjUtMi41LTUuMS01LTUuOS01LjYtMC44LTAuNi0yLjktMS44LTQuNi0yLjctMS44LTAuOS01LjItMS45LTcuNS0yLjEtMi40LTAuMy02LjMgMC04LjggMC41eicvPjwvc3ZnPg==');

        -webkit-mask-image: var(--mask-url);
        mask-image: var(--mask-url);

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;

        -webkit-mask-size: auto var(--hero-bolt-height, 0px);
        mask-size: auto var(--hero-bolt-height, 0px);

        /* Adjusted mask-position syntax for better compatibility */
        -webkit-mask-position: 100% calc(0px - var(--hero-mask-offset, 0px));
        mask-position: 100% calc(0px - var(--hero-mask-offset, 0px));

        /* Ensure mask mode handles the SVG content properly */
        -webkit-mask-mode: alpha;
        mask-mode: alpha;
    }
}

/* Force text color in mask layer to black for the overlap effect */
.hero-content-mask .hero-title,
.hero-content-mask .hero-subtitle {
    color: #000 !important;
    text-shadow: none !important;
}

.hero-subtitle {
    color: #C05CFF;
}

/* BANNER */

.banner-full-width {
    background-image: url('../images/banner-bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.banner-icon img {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
}

/* FULL-WIDTH IMAGE */

.image-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.image-full-width img {
    display: block;
    width: 100%;
    height: auto;
}

/* CARD GRID */

.feature-card {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.feature-card img {
    margin-bottom: auto;
    /* Push image to top if container is flex */
}

.feature-card-text {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-family: 'Inter', sans-serif;
    /* Or project font */
    font-weight: 900;
    font-size: 3rem;
    line-height: 1;
    /* text-transform: uppercase; REMOVED */
    color: #000;
    /* Round, thick outline using SVG filter */
    filter: url(#sticker-outline);
    z-index: 2;
    /* Adding text-shadow to smooth out edges potentially, though stroke is main effect */
}

/* HIGHLIGHT */

.highlight {
    width: 100%;
    background: var(--accent-color);
    background: linear-gradient(to top right, var(--accent-color), #A5F8FF);
    /* A lighter turquoise for gradient end */
    padding: 12rem 8rem;
}

.highlight-text {
    font-weight: 900;
    font-size: 7.5rem;
    color: #000;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
}

@media (max-width: 992px) {
    .highlight-text {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .highlight-text {
        font-size: 4.5rem;
    }

    .highlight {
        padding: 8rem 4rem;
    }
}

@media (max-width: 576px) {
    .highlight-text {
        font-size: 3rem;
    }

    .highlight {
        padding: 6rem 2rem;
        justify-content: center !important;
        align-items: center !important;
    }

    .highlight-text {
        text-align: center !important;
    }
}

/* FAST STEPS */

.feature-step-image {
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .feature-step-image {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .feature-step-image {
        max-width: 260px;
    }
}

@media (max-width: 576px) {
    .feature-step-image {
        max-width: 220px;
    }
}

.phone-mockup {
    border-radius: 40px;
    border: 12px solid #23202F;
    overflow: hidden;
    background-color: #23202F;
}

/* CTA BUTTON */

.cta-btn {
    background: var(--accent-color);
}

.cta-btn:hover {
    box-shadow: 0px 10px 60px var(--accent-color-translucent);
}

/* VIRALITY BANNER (Replaces banner-virality.svg) */

.virality-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    min-height: 400px;
    /* Adjust based on desired aspect ratio approx 1440x780 would be taller, but responsive */
    display: flex;
    align-items: center;
}

.virality-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 0;
}

.virality-banner-band {
    flex: 1;
    height: 100%;
}

.band-yellow {
    background-color: #6A5BFF;
}

.band-green {
    background-color: #C05CFF;
}

.band-orange {
    background-color: #25C8FF;
}

.virality-banner-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 4rem 2rem;
}

.virality-text {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

@media (min-width: 992px) {
    .virality-banner {
        min-height: 600px;
    }
}