/* 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: var(--accent-color) !important;
    font-weight: 600;
    text-shadow: none;
    transition: color 0.25s ease;
}

header .nav-link:hover,
header .nav-link:focus,
header .nav-link:active,
header .nav-link:visited {
    color: var(--accent-color) !important;
}

/* Style for the custom dropdown menu in the header */
header .dropdown-menu {
    background-color: #111;
    border: 1px solid #222;
    padding: 0.5rem 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

header .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

header .dropdown-item:hover,
header .dropdown-item:focus {
    background-color: rgba(37, 200, 255, 0.1);
    color: var(--accent-color);
}

header .dropdown-item.active {
    background-color: var(--accent-color);
    color: #000;
    font-weight: 600;
}

.navbar-toggler .menu-icon {
    color: var(--accent-color);
    fill: var(--accent-color);
    stroke: var(--accent-color);
    transition: color 0.25s ease, filter 0.25s ease;
    filter: drop-shadow(0 0 4px var(--accent-color));
}

.navbar-toggler:not(.collapsed) .menu-icon,
.navbar-toggler:hover .menu-icon {
    color: var(--accent-color);
    fill: var(--accent-color);
    stroke: var(--accent-color);
}

/* Opaque mobile menu overlay styling (does not push content) */
@media (max-width: 767.98px) {
    header .navbar {
        position: relative;
    }

    header .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #010101; /* Match opaque page background */
        border: 1px solid #222;
        border-radius: 0.75rem;
        padding: 1.5rem;
        z-index: 9999; /* Float above all content */
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95);
    }

    header .navigation-menu {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1.25rem !important;
        margin-top: 0 !important;
    }

    header .dropdown-menu {
        position: static !important;
        float: none;
        box-shadow: none;
        border: none;
        background-color: #0d0d0d; /* Dark shade for nested dropdown on mobile */
        padding-left: 1rem;
        margin-top: 0.5rem;
    }
}

/* 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;
}

.virality-text-left {
    text-align: left !important;
}

.virality-text-right {
    text-align: left !important;
}

@media (min-width: 768px) {
    .virality-text-right {
        text-align: right !important;
    }
}

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

/* FAQ SECTION */

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

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
}

.faq-item {
    background-color: #0b0b0b;
    border: 1px solid #1a1a1a;
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.faq-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 25px rgba(37, 200, 255, 0.08);
}

.faq-question {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.faq-item:hover .faq-question {
    color: var(--accent-color);
}

.faq-answer {
    font-size: 1rem;
    line-height: 1.6;
    color: #b0b0b0;
    margin-bottom: 0;
}

/* COOKIE BANNER */
.cookie-banner {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    max-width: 420px;
    background: rgba(11, 11, 11, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner-hidden {
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
}

.cookie-banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-banner-text {
    font-size: 0.9rem;
    color: #CCC;
    line-height: 1.4;
    margin-bottom: 1.25rem;
    text-align: left;
}

.cookie-banner-text a {
    color: var(--accent-color);
    text-decoration: underline;
}

.cookie-banner-text a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.cookie-banner-buttons {
    display: flex;
    gap: 0.75rem;
}

.cookie-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    border: none;
}

.cookie-btn-accept {
    background-color: var(--accent-color);
    color: #010101;
}

.cookie-btn-accept:hover {
    background-color: #e0ff80;
    box-shadow: 0 0 12px rgba(209, 255, 84, 0.35);
}

.cookie-btn-decline {
    background-color: transparent;
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-btn-decline:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 576px) {
    .cookie-banner {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
        padding: 1.25rem;
    }
}

/* PRIVACY PAGE */
.privacy-content {
    color: #b0b0b0;
    font-size: 1rem;
    line-height: 1.6;
}
.privacy-content h1, .privacy-content h2, .privacy-content h3 {
    color: #ffffff;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.privacy-content h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 700;
    text-align: center;
}
.privacy-content p {
    margin-bottom: 1.25rem;
}
.privacy-content ul {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}
.privacy-content a {
    color: #D1FF54;
    text-decoration: none;
}
.privacy-content a:hover {
    text-decoration: underline;
}
.back-btn {
    display: inline-block;
    margin-top: 3rem;
    color: #D1FF54;
    text-decoration: none;
    font-weight: 600;
}
.back-btn:hover {
    text-decoration: underline;
}