/* Global Styles */
:root {
    --bg-color: #050507;
    --card-bg: #121216;
    --primary-color: #00E37C;
    /* Neon Green for Money/Success */
    --primary-hover: #00c069;
    --accent-color: #3B82F6;
    /* Tech Blue */
    --text-color: #ffffff;
    --text-muted: #a1a1aa;
    --danger-color: #ef4444;
    --gradient-main: linear-gradient(135deg, #00E37C 0%, #3B82F6 100%);

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    /* For background z-index */
}

/* Background Animation */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: #050507;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(0, 227, 124, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 227, 124, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    animation: gridMove 20s linear infinite;
    opacity: 0.5;
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 15s infinite ease-in-out;
}

.orb-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: var(--primary-color);
    animation-delay: 0s;
}

.orb-2 {
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: var(--accent-color);
    animation-delay: -5s;
}

.orb-3 {
    top: 40%;
    left: 40%;
    width: 30vw;
    height: 30vw;
    background: purple;
    opacity: 0.2;
    animation-delay: -10s;
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(50px);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(30px, -50px);
    }

    66% {
        transform: translate(-20px, 20px);
    }
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

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

ul {
    list-style: none;
}

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

.highlight {
    color: var(--primary-color);
}

.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    text-align: center;
}

.btn-primary {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 227, 124, 0.4);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 227, 124, 0.6);
}

.btn-lg {
    font-size: 1.2rem;
    padding: 20px 40px;
}

.btn-xl {
    font-size: 1.5rem;
    padding: 24px 48px;
    width: 100%;
}

/* Animations */
.hidden-state {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Navbar */
.navbar {
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(5, 5, 7, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.btn-nav {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Center align hero */
}

.hero .container {
    display: flex;
    /* Changed from grid to flex column */
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    /* Limit width */
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-badge {
    background: rgba(0, 227, 124, 0.1);
    color: var(--primary-color);
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 227, 124, 0.2);
}

.hero-title {
    font-size: 4rem;
    /* Larger title */
    margin-bottom: 24px;
    letter-spacing: -2px;
    line-height: 1.1;
}

.hero-subtitle {


    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-bottom: 60px;
    /* Space between CTA and VSL */
    width: 100%;
}

.cta-subtext {
    font-size: 0.9rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Graph Styles */
.productivity-graph-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    max-width: 600px;
    /* Limit width on desktop */
    margin-left: auto;
    margin-right: auto;
    /* overflow: hidden; Removed to allow text to show if it goes slightly out, though padding should fix it */
}

.productivity-graph-container h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.3rem;
    color: var(--text-muted);
}

.graph-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    /* Distribute space better */
    gap: 20px;
    height: 280px;
    /* Increased height */
    padding-bottom: 10px;
    padding-top: 40px;
    /* Space for top labels */
    max-width: 100%;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 45%;
    /* Relative width */
    height: 100%;
    justify-content: flex-end;
}

.bar {
    width: 100%;
    /* Fill the group width */
    max-width: 80px;
    /* But don't get too fat */
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    transition: height 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    /* Initial State for Animation */
    height: 0 !important;
    min-height: 0;
}

/* Animation Trigger */
.animate-in .bar-before {
    height: 15% !important;
    /* Data value */
}

.animate-in .bar-after {
    height: 100% !important;
    /* Data value */
}

.bar-before {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bar-after {
    background: var(--gradient-main);
    box-shadow: 0 0 30px rgba(0, 227, 124, 0.3);
    position: relative;
    /* overflow: hidden;  Disabled so text inside clearly shows if it overlaps? Actually text is absolute top 0 with negative margin. 
       If overflow is hidden, negative margin content might be clipped if it exceeds the box box? 
       Yes. If the text is 'above' the element (margin-top -30px), and element has overflow hidden, it will likely be cut.
       WE NEED TO MOVE TEXT OUTSIDE OR REMOVE OVERFLOW.
       Let's remove overflow hidden and fix the sine effect if needed, OR move the text in HTML.
       Moving text in HTML is safer, but let's try CSS fix: display text outside. 
       Wait, if I remove overflow:hidden on bar-after, the shine ::after might go out.
       Let's keep overflow:hidden but move text out? No, text is distinct element.
       Let's Un-hide overflow and border-radius the shine.
    */
    overflow: visible;
}

.bar-after::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.4), transparent);
    opacity: 0.3;
    border-radius: 10px 10px 0 0;
    /* Match bar radius */
}

.bar-value {
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff;
    margin-top: -30px;
    /* Position above bar */
    position: absolute;
    top: 0;
    /* Fade in value with bar */
    opacity: 0;
    transition: opacity 0.5s 1s ease;
}

.animate-in .bar-value {
    opacity: 1;
}

.bar-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* Modules Section */

/* Problem Section */
.problem-section {
    padding: 100px 0;
    background: #08080a;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.problem-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 68, 68, 0.3);
}

.icon-cross {
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    /* Green Border */
    box-shadow: 0 0 20px rgba(0, 227, 124, 0.4), inset 0 0 10px rgba(0, 227, 124, 0.2);
    /* Green Glow */
    background: rgba(0, 227, 124, 0.05);
}

.problem-card h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.problem-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

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

.pain-summary h3 {
    font-size: 1.8rem;
}

.red-highlight {
    color: var(--danger-color);
    text-decoration: underline;
}

/* Solution Section */
.solution-section {
    padding: 100px 0;
    background: linear-gradient(to bottom, #08080a, #050507);
}

.solution-content {
    display: flex;
    /* Changed from grid to flex */
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.solution-content h2 {
    font-size: 2.8rem;
    margin-bottom: 30px;
    line-height: 1.1;
}

.solution-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin: 30px 0;
}

.solution-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1.1rem;
    color: #fff;
    transition: all 0.3s ease;
}

.solution-item:hover {
    background: rgba(0, 227, 124, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 227, 124, 0.1);
}

.highlight-p {
    color: var(--primary-color);
    font-weight: 600;
    margin: 30px 0;
    font-size: 1.2rem;
}


.solution-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Audience Section */
.audience-section {
    padding: 80px 0;
    text-align: center;
}

.audience-section h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.audience-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.audience-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Outcomes */
.outcomes-section {
    padding: 100px 0;
}

.outcomes-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 60px;
    text-align: center;
}

.outcomes-box h2 {
    margin-bottom: 50px;
    font-size: 2.2rem;
}

.outcomes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.outcome-item {
    display: flex;
    flex-direction: column;
    background: #08080a;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 60px;
    margin-top: -10px;
}

.modules-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.modules-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.module-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.module-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.module-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
}

.module-card h3 {
    font-size: 1.3rem;
}

.module-body ul {
    margin-bottom: 30px;
}

.module-body li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
    color: var(--text-muted);
}

.module-body li::before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    left: 0;
}

.module-footer {
    margin-top: auto;
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.7;
}

.featured-module {
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(0, 227, 124, 0.05);
}

/* Difference Section */
.difference-section {
    padding: 100px 0;
    background-image: radial-gradient(circle at center, rgba(0, 227, 124, 0.05) 0%, transparent 70%);
}

.center-text {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 40px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    color: #fff;
}

.no-bs-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* Bonus */
.bonus-section {
    padding: 100px 0;
}

.bonus-section h2 {
    text-align: center;
    margin-bottom: 60px;
    font-size: 2.5rem;
}

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.bonus-card {
    background: linear-gradient(180deg, #1A1A20 0%, #121216 100%);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bonus-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-main);
}

.bonus-card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
}

/* Pricing Section */
.pricing-section {
    padding: 120px 0;
}

.pricing-card {
    background: #121216;
    max-width: 600px;
    margin: 0 auto;
    padding: 60px;
    border-radius: 30px;
    text-align: center;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 80px rgba(0, 227, 124, 0.15);
    position: relative;
}

.pricing-header h3 {
    font-size: 1.8rem;
    color: var(--text-color);
}

.pricing-price {
    margin: 40px 0;
}

.old-price {
    display: block;
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.new-price {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1.1;
    font-family: var(--font-heading);
}

.pricing-benefits {
    text-align: left;
    max-width: 350px;
    margin: 0 auto 40px;
}

.pricing-benefits li {
    margin-bottom: 15px;
    font-weight: 500;
}

.guarantee-text {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Animations */
@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

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

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

.shine {
    background-size: 200% auto;
    background-image: linear-gradient(to right, var(--primary-color) 0%, #3B82F6 51%, var(--primary-color) 100%);
    transition: 0.5s;
}

.shine:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 227, 124, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(0, 227, 124, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 227, 124, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

footer {
    padding: 60px 0;
    text-align: center;
    color: var(--text-muted);
    background: #000;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 900px) {
    .btn-xl {
        font-size: 1.2rem;
        padding: 20px 20px;
    }

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

    .section-header h2,
    .solution-content h2,
    .center-text,
    .modules-section h2,
    .outcomes-box h2 {
        font-size: 2rem;
    }

    .pricing-card {
        padding: 30px 15px;
    }

    .new-price {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 120px;
    }

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

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

    .btn {
        width: 100%;
        /* Full width buttons on mobile */
    }

    /* Force Center All Content on Mobile */
    .problem-card,
    .audience-card,
    .module-card,
    .outcome-item,
    .section-header,
    .hero-content,
    .solution-content {
        text-align: center !important;
        align-items: center !important;
    }

    /* Center Lists */
    .check-list li,
    .pricing-benefits li,
    .module-body li {
        justify-content: center;
        text-align: center;
    }

    .module-card {
        padding: 30px 20px;
    }

    .module-header {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .module-body li::before {
        position: relative;
        /* Move bullet inline or removes absolute pos for centering */
        left: auto;
        margin-right: 8px;
    }

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

    .problem-card,
    .audience-card,
    .module-card {
        padding: 20px;
    }

    /* Mobile Graph Optimizations */
    .productivity-graph-container {
        padding: 20px 10px;
    }

    .graph-wrapper {
        gap: 10px;
    }

    .bar-group {
        width: 48%;
        /* Maximize width */
    }

    .bar-value {
        font-size: 0.8rem;
        /* Smaller text */
        margin-top: -25px;
    }

    .bar-label {
        font-size: 0.8rem;
    }

    .productivity-graph-container h3 {
        font-size: 1.1rem;
    }

    /* Outcome List Mobile */
    .outcomes-list {
        display: flex;
        /* Stack vertically */
        flex-direction: column;
        gap: 30px;
    }

    .outcome-item {
        margin-bottom: 20px;
    }
}


```