:root {
    --color-bg: #000700;
    --color-bg-secondary: #000b00;
    --color-red: #c90000;
    --color-green: #004700;
    --color-green-light: #f8e43b;
    /* Replaced old green with yellow for accents */
    /* Keeping original green for lighter accents/text if needed, or remove if strictly following new palette */
    --color-yellow: #f8e43b;
    --color-white: #ffffff;
    --color-text-gray: #b0b0b0;
    --color-card-bg: #ffffff;
    --font-family: 'Inter', sans-serif;
    --header-height: 80px;
}

html {
    scroll-behavior: smooth;
}

#offer {
    scroll-margin-top: 30vh;
}

#inside,
#faq {
    scroll-margin-top: 90px;
    /* Reduced to ~header height + 10px */
}

/* Animation Styles */
.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-white);
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.text-green {
    color: var(--color-green);
}

.text-red {
    color: var(--color-red);
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    border-radius: 12px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-hero {
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 1.1rem;
    padding: 16px 32px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(201, 0, 0, 0.4);
}

.btn-hero:hover {
    background-color: #a80000;
    transform: translateY(-2px);
}

.btn-login {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-login:hover {
    border-color: var(--color-white);
}

.btn-signup {
    background-color: var(--color-red);
    color: var(--color-white);
}

.btn-signup:hover {
    background-color: #a80000;
}

.btn-submit {
    background-color: var(--color-red);
    color: var(--color-white);
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    margin-top: 20px;
}

.btn-submit:hover {
    background-color: #a80000;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: linear-gradient(90deg, #004700 0%, #002e00 100%);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--color-white);
    text-transform: uppercase;
}

.logo .highlight {
    color: var(--color-red);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav {
    display: flex;
    gap: 25px;
    /* margin-right: 15px; removed */
}

.main-nav a {
    color: var(--color-white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--color-red);
}

@media (max-width: 900px) {
    .main-nav {
        display: none;
    }
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: var(--color-white);
    font-size: 1.2rem;
}

.social-icons a:hover {
    color: var(--color-red);
}

.lang-switcher button {
    background: none;
    border: none;
    color: var(--color-white);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: var(--header-height);
    overflow: hidden;
}

/* Kinetic Stripe Background */
/* Kinetic Stripe Background - REPLACED WITH STATIC IMAGE */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background: url('src/png/background.png') no-repeat center center/cover;
}

/* The actual moving stripes - REMOVED */
.hero-bg::before {
    content: none;
}

/* Overlay for Vignette/Depth */
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, var(--color-bg) 90%);
    z-index: 0;
}

/* Background Animation - GPU Accelerated */
@keyframes backgroundScroll {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(14.14px, 14.14px);
        /* Diagonal movement to match 20px pattern */
    }
}

.hero-content {
    max-width: 95vw;
    /* Expanded to fit long text */
    width: 100%;
    padding: 0 20px;
    z-index: 10;
}

.hero-title {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1.2;
    /* Increased slightly to accommodate effects */
    margin-bottom: 20px;
    letter-spacing: -2px;
    color: var(--color-white);
    text-transform: uppercase;
    position: relative;
    display: flex;
    /* Flex to center and stabilize */
    justify-content: center;
    align-items: center;
    min-height: 1.5em;
    /* Reserve space for animations + zoom */
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Hero Text Animation - Masked Kinetic Roll */
.hero-text-mask {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    height: 1.15em;
    /* Tight fit for the text */
    line-height: 1.15;
    position: relative;
    padding: 0 10px;
    /* Extra padding for letter spacing movement */
}

.hero-dynamic-text {
    display: block;
    /* Block for transform to work best */
    font-style: italic;
    /* Speed feel */
    transform: translateY(0);
    will-change: transform, letter-spacing;
}

/* Background Echo Text */
.hero-bg-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

#hero-bg-text {
    font-size: 12rem;
    /* Massive */
    font-weight: 900;
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    white-space: nowrap;
    display: block;
    animation: bgDrift 20s linear infinite alternate;
}

@keyframes bgDrift {
    0% {
        transform: scale(1) translateX(-5%);
    }

    100% {
        transform: scale(1.1) translateX(5%);
    }
}

/* Red Flash Utility */
.text-red-flash {
    color: var(--color-red) !important;
}

/* --- Kinetic Hero Text Animations --- */

/* Common State */
.hero-dynamic-text {
    display: inline-block;
    position: relative;
    opacity: 1;
    /* Reset to 1, let animations handle entry */
    white-space: nowrap;
    will-change: transform, opacity;
}

/* 1. Typewriter Effect */
.anim-typewriter span {
    opacity: 0;
    display: inline-block;
    transform: translateX(-10px);
    animation: typeReveal 0.2s forwards;
}

@keyframes typeReveal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 2. Echo/Stacked Effect */
.anim-stacked {
    animation: stackMain 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.anim-stacked::before,
.anim-stacked::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
    will-change: transform, opacity;
}

.anim-stacked::before {
    color: var(--color-red);
    animation: stackTop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    /* slightly delayed in logic if needed, or concurrent */
}

.anim-stacked::after {
    color: var(--color-bg-secondary);
    animation: stackBottom 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes stackMain {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes stackTop {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translate(-4px, -4px);
        opacity: 0.6;
    }
}

@keyframes stackBottom {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translate(4px, 4px);
        opacity: 0.6;
    }
}

/* 3. Zoom/Grow Effect */
.anim-zoom {
    animation: zoomIn 0.8s ease-out forwards;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
        filter: blur(0);
    }
}

/* Exit Animation (Generic) */
.anim-exit {
    animation: textExit 0.3s ease-in forwards;
}

@keyframes textExit {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: 40px;
    font-weight: 400;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#hero-dynamic-text {
    display: inline-block;
    min-width: 0.5em;
    /* Prevent collapse during switch if empty */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Stats Bar */
.stats-bar {
    background-color: var(--color-red);
    padding: 40px 0;
    margin-top: -50px;
    /* Overlap hero slightly or just sit below */
    position: relative;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.stat-item {
    text-align: center;
    color: var(--color-white);
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
    letter-spacing: 1px;
}

/* Features Section */
.features-section {
    padding: 100px 0;
    background-color: var(--color-white);
    /* Light bg for contrast */
    color: var(--color-bg);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 60px;
    text-align: center;
    color: var(--color-bg);
    text-transform: uppercase;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-card {
    background: var(--color-white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border-left: 5px solid var(--color-green);
}

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

.feature-card:nth-child(even) {
    border-left-color: var(--color-red);
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-bg);
}

.feature-card p {
    color: rgba(0, 7, 0, 0.7);
    font-size: 1.1rem;
}

/* Offer Section */
.offer-section {
    background-color: var(--color-red);
    color: var(--color-white);
    padding: 80px 0;
}

.offer-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center Vertically if needed */
    text-align: center;
}

.offer-col {
    flex: 1;
    padding: 20px;
}

.offer-divider {
    width: 1px;
    height: 150px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 40px;
}

.offer-col h3 {
    font-size: 1.5rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

.offer-value {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 15px;
    color: var(--color-yellow);
}

.offer-col p {
    font-size: 1rem;
    opacity: 0.8;
    max-width: 300px;
    margin: 0 auto;
}

/* Brands Section */
.brands-section {
    padding: 60px 0;
    background-color: var(--color-white);
    border-top: 1px solid rgba(134, 201, 102, 0.2);
}

.brands-carousel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    opacity: 0.6;
}

.brand-item {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(0, 7, 0, 0.4);
}

/* FAQ Section */
/* FAQ Section */
.faq-section {
    padding: 100px 0;
    background-color: #e0e0e0;
}

.faq-title {
    font-size: 5rem;
    font-weight: 900;
    font-style: italic;
    color: var(--color-red);
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -2px;
}

.accordion {
    max-width: 900px;
    margin: 0 auto;
}

.accordion-item {
    background: transparent;
    border-bottom: 1px solid rgba(0, 7, 0, 0.1);
    margin-bottom: 0;
}

/* Remove last border if desired, or keep for consistency */
.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    width: 100%;
    padding: 25px 0;
    text-align: left;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s;
}

.accordion-header:hover {
    color: var(--color-red);
}

/* Chevron Icon */
.accordion-header i {
    font-size: 1rem;
    transition: transform 0.3s ease;
    color: rgba(0, 0, 0, 0.4);
}

.accordion-header.active i {
    transform: rotate(180deg);
    color: var(--color-red);
}

/* Remove old pseudo-elements */
.accordion-header::after {
    content: none;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: transparent;
}

.accordion-content p {
    padding: 0 0 30px 0;
    color: rgba(0, 7, 0, 0.7);
    line-height: 1.6;
}

/* Signup Section */
.signup-section {
    background: linear-gradient(135deg, var(--color-green) 0%, var(--color-bg) 100%);
    /* Brand Green to Black */
    padding: 100px 0;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.signup-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    padding: 0 40px;
}

/* Left Column - Promotional Text */
.signup-text-col {
    flex: 1;
    max-width: 600px;
}

.signup-heading {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-white);
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

.signup-heading .text-red {
    color: var(--color-red);
}

.signup-heading .text-italic {
    font-style: italic;
    /* already italic, but emphasizing */
}

.btn-contact {
    background-color: var(--color-red);
    color: var(--color-white);
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(201, 0, 0, 0.4);
}

.btn-contact:hover {
    background-color: #a80000;
    transform: translateY(-2px);
}

/* Right Column - Registration Card */
.signup-card {
    flex: 0 0 450px;
    /* Fixed width for card */
    background: var(--color-white);
    border-radius: 30px;
    padding: 40px 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.signup-card-header {
    text-align: center;
    margin-bottom: 25px;
}

.signup-card-header h3 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-red);
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1;
}

.signup-card-header p {
    font-size: 0.8rem;
    color: #444;
    font-weight: 700;
    text-transform: uppercase;
}

.link-login {
    color: var(--color-green);
    /* Use brand green instead of blue */
    text-decoration: none;
    font-weight: 800;
}

/* Form Styles */
.signup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group {
    width: 100%;
}

.form-input {
    width: 100%;
    padding: 14px 15px;
    background-color: #f2f2f2;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #333;
    font-family: inherit;
    font-weight: 500;
}

.form-input:focus {
    outline: 2px solid var(--color-green);
    /* Brand green focus */
    background-color: #fff;
}

.form-input::placeholder {
    color: #999;
}

/* Phone Group with visual flag */
.phone-group {
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    border-radius: 8px;
    overflow: hidden;
}

.phone-select {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-right: 1px solid #ddd;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
}

.flag-icon {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.phone-input {
    background: transparent;
    border-radius: 0;
}

.phone-input:focus {
    outline: none;
    background: transparent;
}

/* Messenger Group */
.messenger-group {
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    border-radius: 8px;
    overflow: visible;
    /* Allowing dropdown to overflow */
    position: relative;
    z-index: 10;
}

.messenger-custom-select {
    position: relative;
    width: 80px;
    /* Increased to fit arrow */
    height: 100%;
    min-height: 48px;
    /* Match input height */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* Distribute icon and arrow */
    border-right: 1px solid #ddd;
    cursor: pointer;
    padding: 0 5px;
}

.selected-icon {
    font-size: 1.4rem;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.selector-arrow {
    font-size: 0.8rem;
    color: #999;
    transition: transform 0.3s ease;
}

.messenger-custom-select.active .selector-arrow {
    transform: rotate(180deg);
}

.selected-icon i.fa-telegram {
    color: #24A1DE;
}

.selected-icon i.fa-microsoft,
.selected-icon i.fa-people-group {
    color: #4b53bc;
}

.messenger-options {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    /* Matches parent width */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: none;
    /* Hidden by default */
    flex-direction: column;
    overflow: hidden;
    padding: 5px 0;
}

.messenger-custom-select.active .messenger-options {
    display: flex;
}

.messenger-option {
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
}

.messenger-option:hover {
    background-color: #f0f0f0;
}

.messenger-option i.fa-telegram {
    color: #24A1DE;
}

.messenger-option i.fa-microsoft,
.messenger-option i.fa-people-group {
    color: #4b53bc;
}


.messenger-group .form-input {
    background: transparent;
    border-radius: 0;
    flex: 1;
}

.messenger-group .form-input:focus {
    outline: none;
    background: transparent;
}


/* Double Input (Password) */
.double-input {
    display: flex;
    gap: 10px;
}

.selected-icon img {
    height: 1.2rem;
    width: auto;
}

.messenger-option img {
    height: 1.2rem;
    width: auto;
}

/* Custom Checkboxes */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.custom-checkbox input:checked~.checkmark {
    background-color: var(--color-white);
    border-color: var(--color-red);
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid var(--color-red);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* Captcha Box */
.captcha-box {
    margin-top: 15px;
    background-color: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.captcha-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-checkbox input {
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 2px;
}

.captcha-checkbox label {
    font-size: 0.9rem;
    color: #444;
    font-family: Roboto, sans-serif;
}

.captcha-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
}

.captcha-brand img {
    width: 32px;
    height: 32px;
}

.captcha-brand span {
    font-size: 0.6rem;
    color: #555;
    margin-top: 2px;
}

.captcha-brand small {
    font-size: 0.5rem;
    color: #777;
    margin-top: -2px;
}

/* Submit Button */
.btn-signup-submit {
    background-color: var(--color-red);
    color: var(--color-white);
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    border: none;
    margin-top: 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-signup-submit:hover {
    background-color: #a80000;
}

/* Responsive Registration */
@media (max-width: 1024px) {
    .signup-container {
        flex-direction: column;
        text-align: center;
    }

    .signup-text-col {
        margin-bottom: 40px;
        max-width: 100%;
    }

    .signup-heading {
        font-size: 2.5rem;
    }

    .signup-card {
        width: 100%;
        max-width: 500px;
    }
}

/* Footer */
.footer {
    background-color: #003000;
    padding: 80px 0 40px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Diagonal Scrolling Dividers */
.section-divider {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #e0e0e0;
    overflow: hidden;
    z-index: 10;
}

/* Adjust divider background if placed on dark bg */
.section-divider.dark-bg {
    background-color: var(--color-bg);
}

.divider-tape {
    position: absolute;
    width: 120%;
    left: -10%;
    height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tape-red {
    background-color: var(--color-red);
    top: 50%;
    transform: translateY(-50%) rotate(3deg);
    z-index: 2;
}

.tape-green {
    background-color: var(--color-green);
    top: 50%;
    transform: translateY(-50%) rotate(-2deg);
    z-index: 1;
}

/* Tape Text Content */
.divider-logo {
    height: 30px;
    /* Fit within 50px tape */
    vertical-align: middle;
    margin-right: 10px;
    filter: brightness(0) invert(1);
    /* White logo? Or keep original? original is likely colored. */
    /* If original is svg, check if it needs white filter. Usually banners are colored. 
       Tape Red/Green background -> White text was used. 
       If logoTabua is colored, it might clash. 
       Let's assume we want it white if the previous text was white.
       But text color wasn't specified in tape-content? 
       .tape-content is usually white text? 
       Let's check .tape-content color. */
}

.tape-content {
    display: flex;
    animation: scrollText 20s linear infinite;
    white-space: nowrap;
}

.tape-content span {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0 20px;
    font-style: italic;
    display: flex;
    align-items: center;
}

.tape-content i {
    font-size: 0.8em;
    margin-left: 10px;
    opacity: 0.7;
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Reverse scroll for variety if needed */
.scroll-reverse .tape-content {
    animation-direction: reverse;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Default left align */
}

/* Center brand col specifically or generally for footer? 
   Ref image suggests it's a standalone block. 
   If the whole footer is grid, brand-col is the first item. 
   If we want to center the content OF the brand col:
*/
.brand-col {
    align-items: center;
    /* Centers items horizontally in the flex column */
    text-align: center;
}

.footer-col h4 {
    color: var(--color-white);
    margin-bottom: 25px;
    font-size: 1rem;
    font-weight: 700;
}

/* --- Bento Grid Section --- */
.inside-section {
    padding: 80px 0;
    background-color: #e0e0e0;
    /* Light gray bg like reference */
    color: var(--color-bg);
    overflow: hidden;
}

.inside-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 40px;
}

/* Vertical Text Column */
.inside-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 8rem;
    font-weight: 900;
    color: var(--color-red);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    letter-spacing: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main Grid */
.bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
}

.bento-card {
    background: var(--color-white);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease;
}

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

/* Card Variants */
.card-red {
    background-color: var(--color-red);
    color: var(--color-white);
    grid-column: span 1;
    /* Actually span 1 of the 3-col grid, wait. design is 2-col wide red? */
    /* Let's adjust grid: 
       Row 1: Red (2fr), Speed (1fr), In-House (1fr) -> Total 4fr?
       No, let's make it 4 columns: 1fr 1fr 1fr 1fr
       row 1: Red (span 2), Speed (span 1), In-House (span 1)
       row 2: Max (span 1), Your Traffic (span 1), Green (span 2)
    */
}

.bento-grid {
    grid-template-columns: repeat(4, 1fr);
}

.card-red {
    grid-column: span 2;
    background-color: var(--color-red);
    color: var(--color-white);
    text-align: center;
    padding: 40px;
}

.card-green {
    grid-column: span 2;
    background-color: var(--color-green);
    color: var(--color-white);
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-white {
    grid-column: span 1;
    background-color: var(--color-white);
    color: var(--color-bg);
}

/* Typography inside cards */
.bento-title {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-style: italic;
    line-height: 1;
}

.text-red {
    color: var(--color-red);
}

.text-green {
    color: var(--color-green);
}

/* Actually light green for visibility on dark if needed, or stick to brand */
.text-cyan {
    color: var(--color-green);
}

/* Reference image uses a cyan/teal color */

.card-red h2 {
    font-size: 2.5rem;
    font-weight: 900;
    font-style: italic;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.bento-stats {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.bento-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bento-stat-num {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
}

.bento-stat-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 5px;
    opacity: 0.9;
}

.card-white ul {
    list-style: none;
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.card-white ul li {
    margin-bottom: 5px;
    padding-left: 15px;
    position: relative;
}

.card-white ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-bg);
}

.card-logo {
    height: 40px;
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inside-label {
        display: none;
        /* Hide huge vertical text on smaller screens */
    }
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .card-red,
    .card-green {
        grid-column: span 1;
    }

    .inside-container {
        flex-direction: column;
    }
}

.footer-col a:hover {
    color: var(--color-green);
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {
    font-weight: 600;
    color: var(--color-white);
}

.footer-logos {
    display: flex;
    justify-content: center;
    gap: 20px;
    opacity: 0.5;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 30px;
}

.badge {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .header-right {
        display: none;
        /* Hide for simplicity or implement burger */
    }

    .hero-title {
        font-size: 3.5rem;
    }

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

    .offer-container {
        flex-direction: column;
        gap: 40px;
    }

    .offer-divider {
        width: 100px;
        height: 1px;
        margin: 10px 0;
    }

    .form-row {
        flex-direction: column;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-col {
        margin-bottom: 30px;
    }

    .footer-social {
        justify-content: center;
    }
}

/* --- Offer Banner Section --- */
.offer-banner-section {
    padding: 60px 0;
    background-color: #e0e0e0;
    /* Match updated inside-section bg */
    display: flex;
    justify-content: center;
}

.offer-banner {
    background-color: var(--color-red);
    width: 95%;
    max-width: 1300px;
    border-radius: 40px;
    padding: 60px 40px;
    text-align: center;
    color: var(--color-white);
    box-shadow: 0 15px 40px rgba(201, 0, 0, 0.2);
}

.offer-title {
    font-size: 5rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 50px;
    line-height: 0.9;
    letter-spacing: -2px;
}

.offer-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    /* Gaps handled by padding/border */
    margin-bottom: 40px;
    flex-wrap: wrap;
    /* Fallback */
}

.offer-item {
    padding: 0 30px;
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    flex: 1;
    min-width: 200px;
}

.offer-item:last-child {
    border-right: none;
}

.offer-item h3 {
    font-size: 2.2rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.offer-item p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.9;
}

.offer-footer-text {
    margin-top: 40px;
    font-size: 0.9rem;
    opacity: 0.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Responsive Offer Banner */
@media (max-width: 1024px) {
    .offer-title {
        font-size: 3.5rem;
    }

    .offer-item h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .offer-grid {
        flex-direction: column;
        gap: 30px;
    }

    .offer-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding-bottom: 20px;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .offer-item:last-child {
        border-bottom: none;
    }

    .offer-title {
        font-size: 2.5rem;
    }
}

/* --- Mobile Menu Styles --- */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.5rem;
    cursor: pointer;
    /* Above mobile nav if needed, but close btn is inside */
}

/* --- Hero Animation (Mixed Styles) --- */
.hero-title {
    font-size: 5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    min-height: 1.4em;
    perspective: 1000px;
}

#hero-dynamic-text {
    color: #FFFFFF;
    /* White Text */
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    /* Hidden by default, controlled by anim classes */

    /* Strong Shadow/Outline Effect */
    text-shadow:
        2px 2px 0px #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
    /* Subtle wireframe feel */
}

/* 1. Typewriter Animation */
.anim-typewriter {
    opacity: 1 !important;
    border-right: 0.1em solid var(--color-red);
    /* Cursor */
    animation: blinkCursor 0.7s steps(40) infinite;
}

/* 2. Fade Animation */
.anim-fade {
    animation: fadeInOut 2s ease-in-out forwards;
}

/* 3. Scale Animation */
.anim-scale {
    animation: scaleUp 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes blinkCursor {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--color-red);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes scaleUp {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Cleanup old classes */
.glitch-active,
.hero-char {
    display: none !important;
}

#hero-dynamic-text::before,
#hero-dynamic-text::after {
    display: none !important;
}

/* Remove old static element styles if present */
.hero-bg-text {
    display: none !important;
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--color-bg);
    /* Or dark gradient */
    background: linear-gradient(180deg, #000700 0%, #001a00 100%);
    z-index: 2000;
    padding: 40px;
    transition: right 0.4s ease;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.mobile-nav-overlay.active {
    right: 0;
}

.close-menu {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.5rem;
    cursor: pointer;
    margin-bottom: 40px;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.mobile-nav-links a {
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Media Queries for Mobile Menu visibility */
@media (max-width: 900px) {
    .hamburger-menu {
        display: block;
    }

    /* Main Nav hidden by previous media query already */

    /* Also hide auth buttons on mobile header to save space, show in menu instead */
    .header-right .auth-buttons {
        display: none;
    }

    /* Fix Hero Text Cropping on Mobile */
    /* Hero Typography - Mobile Adjustments */
    .hero-title {
        font-size: 2rem;
    }

    /* On mobile, reduce the giant background text slightly so it's not overwhelming */
    #hero-dynamic-text::before {
        font-size: 50vw;
        /* Still huge, but relative to mobile width */
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
    }

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

/* --- Fix Inside Section Responsiveness --- */
@media (max-width: 768px) {
    .inside-section {
        padding: 40px 0;
    }

    .inside-container {
        padding: 0 15px;
    }


    /* Bento Card Adjustments */
    .bento-card {
        padding: 20px;
    }

    .card-red h2 {
        font-size: 1.8rem;
    }

    .bento-stat-num {
        font-size: 2.5rem;
    }

    .bento-stat-label {
        font-size: 0.8rem;
    }

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

    .bento-title {
        font-size: 1.2rem;
    }

}

/* --- License Section Styles --- */
.license-section {
    background-color: #004700;
    /* Rich green from Reference/Palette */
    padding: 80px 0;
    color: var(--color-white);
    overflow: hidden;
}

.license-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.license-content {
    flex: 1;
    max-width: 40%;
}

.license-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.license-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    /* Ensure font consistency */
}

.license-icon {
    background-color: #009900;
    /* Lighter green for box */
    color: #fff;
    padding: 2px 6px;
    font-size: 0.8rem;
    border-radius: 2px;
    font-weight: 700;
    font-style: normal;
}

.highlight-num {
    font-size: 2.2rem;
    font-weight: 900;
    font-style: italic;
    line-height: 0.8;
}

.license-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.9;
    max-width: 500px;
}

.btn-license {
    background-color: var(--color-red);
    padding: 14px 40px;
    font-size: 1rem;
    margin-top: 20px;
    border-radius: 6px;
}

.btn-license:hover {
    background-color: #a80000;
}

.license-image {
    flex: 1.2;
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 65%;
}

.license-image img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: shadow or effect */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

/* Responsive License Section */
@media (max-width: 992px) {
    .license-container {
        flex-direction: column-reverse;
        /* Image top or bottom? Ref image has text left. Let's stack Image Top if we want visual impact, or Text Top for context.
        Let's try Text Top (column) for mobile flow, or Image Top. 
        Actually, mobile mockup usually looks good at top or bottom. 
        Let's do Column (Text Top, Image Bottom) or Column-Reverse?
        If I do column, Text is top. 
        */
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .license-content,
    .license-image {
        max-width: 100%;
        width: 100%;
    }

    .license-header {
        justify-content: center;
    }

    .license-text {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================ */
/* Feedback Modal (Error / Success)             */
/* ============================================ */

.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.feedback-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.feedback-modal {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 36px 32px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(201, 0, 0, 0.08);
    transform: scale(0.85) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}

.feedback-modal-overlay.active .feedback-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.feedback-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    background: rgba(201, 0, 0, 0.12);
    color: var(--color-red);
    border: 2px solid rgba(201, 0, 0, 0.25);
    animation: iconPulse 2s ease-in-out infinite;
}

.feedback-modal-icon.success {
    background: rgba(0, 180, 80, 0.12);
    color: #00b450;
    border-color: rgba(0, 180, 80, 0.25);
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.feedback-modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feedback-modal-messages {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    text-align: left;
}

.feedback-modal-messages li {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.92rem;
    line-height: 1.55;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--color-red);
    margin-bottom: 8px;
    transition: background 0.2s;
}

.feedback-modal-messages li:hover {
    background: rgba(255, 255, 255, 0.07);
}

.feedback-modal-messages li.success-msg {
    border-left-color: #00b450;
}

.feedback-modal-close {
    background: var(--color-red);
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(201, 0, 0, 0.3);
}

.feedback-modal-close:hover {
    background: #a80000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 0, 0, 0.4);
}

.feedback-modal-close.success {
    background: #00b450;
    box-shadow: 0 4px 15px rgba(0, 180, 80, 0.3);
}

.feedback-modal-close.success:hover {
    background: #009940;
    box-shadow: 0 6px 20px rgba(0, 180, 80, 0.4);
}

@media (max-width: 480px) {
    .feedback-modal {
        padding: 30px 22px 24px;
        border-radius: 16px;
    }

    .feedback-modal-icon {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }

    .feedback-modal-title {
        font-size: 1.15rem;
    }

    .feedback-modal-messages li {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}