@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

html,
body{
    width: 100vw;
    height: auto;
    background: linear-gradient(to right, #000000, #23201f);;
    color: #ffffffb5;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1{
    text-transform: uppercase;
    font-size: 190px;
    font-weight: 400;
    line-height: 0.85;
    font-family: "VT323", monospace;
}

a,
p{
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 0.9;
}

.main-content {
    position: relative;
    z-index: 5;
    overflow: clip;
}

.model{
    position: fixed;
    z-index: 2;
    pointer-events: none;
}

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

nav p {
    font-family: "Bitcount Prop Single", system-ui;
    font-weight: 500;
    font-size:xx-large;
}

nav .nav-links {
    display: flex;
    gap: 2em;
}

nav a{
    text-transform: uppercase;
    font-family: "Bitcount Prop Single", system-ui;
    font-size: large;
}

section{
    width: 100vw;
    height: 100vh;
}

.intro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
}

.header-row{
    display: flex;
    gap: 12em;
    align-items: center;
}

.header-row p{
    text-transform: uppercase;
    width: 20%;
}

.google-play-button img {
    height: 75px; /* Adjust the height as needed */
    width: auto;
    transition: transform 0.3s ease;
}

.google-play-button:hover img {
    transform: scale(1.05);
}

.archive{
    height: 200vh;
    display: flex;
    flex-direction: column;
    gap: 3em;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.archive-header p{
    font-style: italic;
}

.archive h2{
    font-size: 120px;
    font-weight: 300;
    color: #4f4f4f;
}

.archive-info{
    width: 100%;
    padding: 1em;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.archive-info p{
    text-transform: uppercase;
    color: #4f4f4f;
}

.transition {
    height: 10vh;
}

.contact {
    display: flex; /* Changed to flex for centering */
    justify-content: center;
    align-items: center;
}

.contact-content {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1100px;
    width: 100%;
    gap: 3em;
    align-items: center;
    padding: 2em;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.contact-form-column {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.contact-form {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
}

.dot-matrix-container {
    height: 100%;
    min-height: 400px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    overflow: hidden;

    /* UPDATED: Larger dots with a smaller gap */
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 5px, transparent 5px);
    background-size: 20px 20px;
}

/* --- NEW FADING DOT MATRIX STYLES --- */

.dot-matrix-container {
    height: 100%;
    min-height: 400px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    overflow: hidden;

    /* The faint "off" dots in the background */
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 5px, transparent 5px);
    background-size: 20px 20px;
}

/* This is the base style for all shape layers */
.dot-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* All shapes start as invisible */

    /* The bright "on" dots */
    background-image: radial-gradient(#b7ff00 5px, transparent 5px);
    background-size: 20px 20px;

    /* Apply the animation */
    animation: fadeCycle 4s infinite;

    /* Base mask properties */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 75%;
}

/* --- Assign a different shape mask to each layer --- */
.shape-chat {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M89 10H11C5 10 0 15 0 21v48c0 6 5 11 11 11h11v15l15-15h41c6 0 11-5 11-11V21c0-6-5-11-11-11z'/%3E%3C/svg%3E");
}

.shape-cloud {
    /* This new path is a simple polygon, which is much more reliable for masking */
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M70 30 C77 30, 83 36, 83 43 C83 50, 77 56, 70 56 L30 56 C23 56, 17 50, 17 43 C17 36, 23 30, 30 30 C30 20, 40 10, 50 10 C60 10, 70 20, 70 30 Z' /%3E%3C/svg%3E");
    animation-delay: 2s;mask-size: 80%;
}

/* The keyframe for a single fade in/hold/fade out cycle */
@keyframes fadeCycle {
    0%   { opacity: 0; }
    15%  { opacity: 1; } /* Fade in */
    33%  { opacity: 1; } /* Hold */
    48%  { opacity: 0; } /* Fade out */
    100% { opacity: 0; }
}


.form-group {
    position: relative;
    margin-bottom: 2em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 0;
    font-size: 1rem;
    color: #fff;
    outline: none;
    resize: none; /* Prevents textarea resizing */
}

.form-group label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Core of the floating label effect */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -15px;
    font-size: 0.8rem;
    color: #aeff00ae;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: #aeff00ae;
}

.submit-button {
    display: inline-block;
    width: 100%;
    padding: 15px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    background: linear-gradient(90deg, #000000, #313131);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(183, 255, 0, 0.2);
}

.outro {
    height: auto;
    padding: 6em 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em; /* This will handle both row and column gaps */
    max-width: 1200px;
    width: 100%;
    align-items: center;
}

.outro-image-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outro-promo-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px; /* Rounded corners for the image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

.outro-cards-column {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 grid */
    gap: 1.5em;
}

.evo-cash-card {
    position: relative; /* Creates a positioning context for the number */
    background-color: #242328;
    padding: 2em;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
    min-height: 180px; /* Restored a consistent height */
    overflow: hidden; /* Added to contain the number if it's too big */
}

.evo-cash-card:hover {
    transform: translateY(-5px);
}

.evo-cash-card .card-info {
    position: relative;
    z-index: 1;
    max-width: 50%; 
}

.evo-cash-card .card-info p {
    color: #ffffff;
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 0.5em;
    text-align: left;
}
.evo-cash-card .card-info p strong {
    color: #a7ff00;
}

.evo-cash-card .background-number {
    position: absolute;
    bottom: 0.2em; /* <-- CHANGE: Positions from the bottom */
    right: 0;  /* <-- Positions from the right */
    z-index: 0;
    pointer-events: none;
    font-family: "Bitcount Prop Single", system-ui;
    font-size: 5em;
    font-weight: 400;
    line-height: 1;
    color: #a7ff00;
    white-space: nowrap;
}

.outro-download {
    width: 100%;
    text-align: center;
    margin-top: 100px;
}

.site-footer {
    background-color: #111;
    color: #aaa;
    padding: 4em 2em 2em 2em;
    text-transform: none;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2em;
    max-width: 1200px;
    margin: 0 auto 3em auto;
    text-align: left;
}

.footer-about, .footer-links, .footer-contact {
    flex: 1;
    min-width: 220px;
}

.site-footer h3 {
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: 600;
}

.site-footer p {
    font-size: 0.95em;
    line-height: 1.6;
}

.social-icons {
    margin-top: 1em;
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-icons a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-icons a:hover {
    transform: scale(1.1);
}

.social-icons img {
    width: 24px;
    height: 24px;
    filter: grayscale(1) invert(0.7);
    transition: filter 0.3s ease;
}

.social-icons a:hover img {
    filter: none;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.8em;
}

.footer-links a {
    color: #aaa;
    transition: color 0.3s ease;
    font-size: 0.95em;
}

.footer-links a:hover {
    color: #99ff00;
}

.footer-branding {
    font-family: "VT323", monospace;
    font-size: 25vw;
    line-height: 1;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.03);
    left: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

.footer-bottom {
    text-align: center;
    padding-top: 2em;
    margin-top: 2em;
    border-top: 1px solid #333;
    font-size: 0.9em;
    color: #888;
}

.lenis.lenis-smooth{
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

.hamburger {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px; /* Space between the bars */
    padding: 0;
    z-index: 20; /* Ensure it's above other elements */
}

.hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* --- Add this to the end of styles.css --- */

@media (max-width: 768px) {

    .intro {
        flex-direction: column;
        justify-content: center; /* Center the whole block vertically */
        gap: 2em;
    }


    .intro .header-row:nth-child(1) {
        order: 2;
    }

    .intro .header-row:nth-child(2) {
        order: 1;
        flex-direction: column-reverse;
        gap: 2em;
    }

    .intro .header-row:nth-child(3) {
        order: 3;
    }
    h1 {
        font-size: 80px;
    }

    .header-row {
        flex-direction: column; /* Stack elements vertically */
        gap: 2em; /* Reduce the gap */
        align-items: flex-start; /* Align to the left */
        text-align: left;
    }

    .header-row p {
        width: 100%; /* Allow paragraph to take full width */
    }
    
    .archive h2, .contact h2 {
        font-size: 50px; /* Reduce other large headings */
    }

    .archive-info {
        flex-direction: column; /* Stack info items */
        gap: 1em;
    }

    .contact {
        padding: 0 1.5em; /* Adds space on the left and right of the section */
    }
    
    .footer-content {
        flex-direction: column; /* Stack footer sections */
        text-align: center;
    }
    .footer-content > div {
        align-items: center;
        text-align: center;
    }
    .social-icons{
        justify-content: center;
    }
    .hamburger {
        display: flex;
    }

    nav .nav-links {
        display: none;
        position: absolute;
        top: 80px;
        right: 2em;
        background-color: rgba(20, 20, 20, 0.9);
        backdrop-filter: blur(10px);
        flex-direction: column;
        gap: 1.5em;
        padding: 1.5em 2em;
        border-radius: 10px;
        text-align: right;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    nav .nav-links.nav-active {
        display: flex;
    }

    .hamburger.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .outro-grid {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .outro-cards-column {
        grid-template-columns: 1fr; /* Single column on mobile */
    }

    .evo-cash-card {
        padding: 1.5em;
        min-height: auto;
    }

    .evo-cash-card .card-info {
        max-width: 100%; /* Text can take full width */
    }

    .evo-cash-card .background-number {
        position: relative;
        transform: none;
        top: auto;
        right: auto;
        font-size: 3em;
        text-align: right;
        margin-top: 0.5em;
        pointer-events: auto;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .dot-matrix-container {
    }

    .footer-about h3 {
        text-align: center;
        margin-top: 1.5em; /* Adds space between stacked footer sections */
        margin-bottom: 0.8em;
    }

    .footer-content > div:first-child h3 {
        margin-top: 0;
    }
}