/* --- General Styles --- */
body {
    font-family: 'Rubik', sans-serif; /* Using Rubik font for consistency with captiongenerator */
    margin: 0;
    background-color: #22223b; /* Slightly brighter dark blue */
    color: #e0e0e0; /* Light grey text */
    line-height: 1.6;
    direction: rtl; /* Right-to-left for Hebrew */
}

a {
    color: #64B5F6; /* Light Blue for links */
    text-decoration: none;
}

a:hover {
    text-decoration: none; /* Remove underline on hover */
    color: #72d4b7; /* Lighter teal on hover */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 0; /* Increased vertical padding */
}

/* --- Header --- */
.main-header {
    padding: 1.5rem 0; /* Increased padding */
    background-color: #161628; /* Slightly darker than body for contrast */
    border-bottom: 1px solid #2a2a4a; /* Subtle border */
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.logo-placeholder {
    font-size: 1.8rem; /* Slightly larger logo */
    font-weight: 700; /* Bolder */
    background: linear-gradient(to right, #64B5F6 30%, #72d4b7 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Make text transparent so gradient background shows through */
}

.signup-button {
    background-color: transparent;
    color: #72d4b7; /* Text color Primary Teal */
    padding: 0.8rem 1.5rem; /* Increased padding */
    border: 2px solid #72d4b7; /* Border in Primary Teal */
    border-radius: 25px; /* More rounded corners */
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.signup-button:hover {
    background-color: #72d4b7;
    color: #ffffff;
    text-decoration: none;
}

/* --- Introduction Section --- */
.intro-section {
    text-align: center;
    padding: 3rem 0;
    position: relative; /* Needed for the pseudo-element positioning */
    z-index: 1; /* Ensure content is above the gradient */
}

.intro-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px; /* Height of the gradient band, increased by 150% */
    background: linear-gradient(to bottom, #22223b, #121212); /* Gradient from body background to pricing section background */
    z-index: -1; /* Place the gradient behind the content */
}

.intro-section h1 {
    color: #72d4b7; /* Primary Teal */
    margin-bottom: 1.5rem; /* Increased margin */
    font-size: 3rem; /* Larger heading */
    font-weight: 700;
}

.intro-section p {
    font-size: 1.2rem; /* Slightly larger text */
    max-width: 800px; /* Wider text block */
    margin: 0 auto;
    color: #b0b0c0; /* Lighter grey for text */
}

/* --- Pricing Plans Section --- */
.pricing-section {
    padding: 0.5rem 0; /* Adjusted padding */
    text-align: center;
    background-color: #121212; /* Dark background for the section as in image */
}

.pricing-section h2 {
    color: #e0e0e0;
    margin-top: 0.5rem; /* Control space above heading */
    margin-bottom: 2.5rem; /* Adjusted margin */
    font-size: 2.2rem; /* Adjusted heading size */
    font-weight: 700;
}

.pricing-plans {
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* Adjusted gap to match image more closely */
    flex-wrap: wrap;
}

.plan {
    background-color: #1E1E1E; /* Dark grey for plan boxes like in the image */
    border: 1px solid #333333; /* Slightly lighter border for plan boxes */
    border-radius: 8px; /* Slightly rounded corners for plan boxes */
    padding: 2rem; /* Adjusted padding */
    width: 300px; /* Adjusted width */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan:hover {
    transform: translateY(-5px); /* Subtle lift */
    box-shadow: 0 8px 15px rgba(0, 150, 136, 0.12); /* Further subdued green shadow with lower opacity */
}

.plan h3 {
    color: #009688;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    font-weight: 700;
}

.plan .price {
    font-size: 2.5rem; /* Larger price font */
    font-weight: bold;
    color: #64B5F6; /* Match the blue theme */
    margin: 1rem 0;
    text-align: center; /* Added to center the price text */
}

.plan .price span {
    font-size: 1rem;
    color: #B0BEC5; /* Muted color for the "/month" part */
}

.plan ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0; /* Adjusted margin */
    text-align: right;
    width: 100%;
}

.plan ul li {
    margin-bottom: 0.8rem; /* Adjusted margin */
    position: relative;
    padding-right: 25px; /* Adjusted space for checkmark */
    font-size: 1rem; /* Adjusted font size */
    color: #E0E0E0; /* Light grey for list items */
}

.plan ul li::before {
    content: '\2714'; /* Checkmark symbol */
    color: #009688; /* Even more subdued teal/green checkmark */
    position: absolute;
    right: 0;
    top: 1px; /* Adjusted vertical alignment */
    font-weight: bold;
}

.plan .cta-button {
    background-color: #007bff; /* Standard blue button color */
    color: #ffffff;
    padding: 0.6rem 1.5rem; /* Adjusted padding for a smaller button */
    border: none;
    border-radius: 25px; /* More rounded corners */
    font-size: 0.9rem; /* Adjusted font size for a smaller button */
    font-weight: bold;
    cursor: pointer;
    margin-top: auto;
    transition: background-color 0.3s ease;
    width: auto; /* Auto width to fit content */
    min-width: 120px; /* Minimum width to maintain some size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.plan .cta-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* --- Responsive Adjustments (Example) --- */
@media (max-width: 768px) {
    .pricing-plans {
        flex-direction: column;
        align-items: center;
    }

    .plan {
        width: 90%; /* Adjusted for smaller screens */
        max-width: 400px;
    }
    .intro-section h1 {
        font-size: 2.2rem;
    }
     .main-header .container {
        justify-content: center;
     }
     .container {
        padding: 2rem 0; /* Reduced padding on small screens */
     }
     .intro-section {
        padding: 3rem 0; /* Keep consistent padding */
     }
    .intro-section::after {
        height: 200px; /* Adjust gradient height on smaller screens, increased by 150% */
    }
     .pricing-section {
        padding: 3rem 0; /* Reduced padding on small screens */
     }
      .plan {
         padding: 2rem; /* Reduced padding */
      }
      .plan ul {
         margin: 1.5rem 0; /* Reduced margin */
      }
      .plan ul li {
         margin-bottom: 0.8rem; /* Reduced margin */
      }
      .error-message, .status-message {
         padding: 0.8rem 1rem; /* Reduced padding */
         margin: 1rem auto; /* Reduced margin */
         font-size: 1rem;
      }
      .btn {
         padding: 0.7rem 1.2rem; /* Reduced padding */
         font-size: 1rem;
      }
       .login-form input[type="email"],
      .login-form input[type="password"] {
          padding: 0.7rem; /* Reduced padding */
          margin-bottom: 0.8rem; /* Reduced margin */
      }
    /* Make the try free button wider on small screens */
    .intro-section .cta-button.blue-button {
        width: 80%; /* Make button wider */
        padding: 1rem 0; /* Adjust padding */
        transition: transform 0.2s ease-out; /* Add transition for smooth scaling */
    }

    .intro-section .cta-button.blue-button:hover {
        transform: scale(1.05); /* Scale up slightly on hover */
    }
}

/* --- Call to Action Section --- */
.call-to-action {
    text-align: center;
    padding: 3rem 0;
    background-color: #1f1f1f; /* Slightly lighter dark grey background */
}

.call-to-action p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #E0E0E0; /* Light grey text */
}

.call-to-action .cta-button.blue-button {
    background-color: #2196F3; /* Blue */
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 0.5rem; /* Space between button and small text */
}

.call-to-action .cta-button.blue-button:hover {
    background-color: #1976D2; /* Darker blue on hover */
}

.call-to-action .small-text {
    font-size: 0.9rem;
    color: #BDBDBD; /* Lighter grey for text */
    margin-top: 0;
}

/* General style for the main CTA button in the intro section */
.intro-section .cta-button.blue-button {
    transition: transform 0.2s ease-out; /* Add transition for smooth scaling */
}

.intro-section .cta-button.blue-button:hover {
    background-color: #E0E0E0; /* Whitish gray on hover */
    transform: scale(1.05); /* Scale up slightly on hover */
}

/* Discount pricing styles */
.price-container {
    text-align: center;
    margin: 1rem 0;
}

.original-price {
    font-size: 2rem;
    font-weight: bold;
    color: #888;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.original-price::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #ffffff;
    transform: translateY(-50%);
    border-radius: 2px;
}

.price-container .price {
    color: #28a745 !important;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 0.3rem 0;
}

.price-container .price span {
    color: #666 !important;
    font-size: 1rem;
}

.pricing-note {
    font-size: 0.8rem;
    color: #888;
    margin: 0.5rem 0;
    font-style: italic;
    text-align: center;
}

/* Popular Plan Badge */
.plan.popular {
    position: relative;
    border: 2px solid #6366f1;
    padding-top: 3rem;
}

.popular-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    color: white;
    text-align: center;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 6px 6px 0 0;
}