/* Color Palette */
:root {
    --color-primary: #007bff; /* Bright primary blue */
    --color-primary-dark: #0056b3; /* Darker primary for hover/CTA */
    --color-secondary: #6c757d; /* Muted secondary */
    --color-action: #28a745; /* Green for Start Trial CTA */
    --color-action-dark: #1e7e34;
    --color-background-light: #f8f9fa; /* Light grey background */
    --color-text-dark: #343a40; /* Dark text */
    --color-card-bg: #ffffff; /* White card background */
}

/* Base Body Styling for Better Typography */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
}

/* --- Hero Section Styling --- */
.landing-hero {
    /* Subtle gradient or solid color background for the hero */
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: white; /* White text on dark background */
    padding: 6rem 1rem; /* Increase padding for more impact */
    margin-bottom: 0; /* Remove default jumbotron margin */
    border-radius: 0; /* Full width hero */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .landing-hero .display-3 {
        font-size: 3.5rem; /* Larger main title */
        font-weight: 700;
        margin-bottom: 0.5rem;
        letter-spacing: 2px;
    }

    .landing-hero .lead {
        font-size: 1.5rem;
        opacity: 0.9;
    }

    .landing-hero .hr {
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        width: 50%;
        margin: 1.5rem auto;
    }

/* Primary CTA Button */
.btn-action {
    background-color: var(--color-action);
    border-color: var(--color-action);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem; /* Slightly rounded corners */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3); /* Subtle button shadow */
}

    .btn-action:hover {
        background-color: var(--color-action-dark);
        border-color: var(--color-action-dark);
        transform: translateY(-2px); /* Slight lift on hover */
        box-shadow: 0 6px 8px rgba(40, 167, 69, 0.4);
    }

/* --- Feature Cards Styling --- */
.card-feature {
    border: none;
    border-radius: 1rem; /* Rounded corners for modern look */
    transition: all 0.3s ease;
    overflow: hidden; /* To keep shadow clean */
    background-color: var(--color-card-bg);
}

    .card-feature:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Lighter, more pronounced shadow on hover */
        transform: translateY(-5px); /* Slight lift */
    }

    .card-feature .card-title {
        font-weight: 600;
        color: var(--color-text-dark);
        margin-bottom: 1rem;
        /* Emoji font size adjustment */
    }

    .card-feature .card-text {
        color: var(--color-secondary);
    }

/* --- Plans & Pricing Section --- */
.card-img-top {
    /* Style for the plan image placeholders */
    filter: saturate(0.8); /* Slightly less saturated images */
}

/* Plan Card Styling */
.row .col-lg-3 .card {
    border: 1px solid #e9ecef; /* Light border */
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    background-color: var(--color-card-bg);
}

    .row .col-lg-3 .card:hover {
        border-color: var(--color-primary); /* Highlight on hover */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

.row .col-lg-3 .card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.row .col-lg-3 .card-subtitle {
    font-weight: 400;
    font-style: italic;
}

/* Price/Seat emphasis */
.row .col-lg-3 .card-body p strong {
    color: var(--color-text-dark);
}

/* Buy Button */
.row .col-lg-3 .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
    transition: all 0.3s ease;
}

    .row .col-lg-3 .btn-primary:hover {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }

/* Manage Plans Button (Assuming this is an admin link visible only during development/testing) */
.row .col-lg-3 .btn-outline-secondary {
    border-color: #ced4da;
    color: var(--color-secondary);
    font-size: 0.85rem;
}

/* --- Final CTA Section --- */
.btn-secondary-cta {
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    margin: 0 0.5rem;
}

/* View Demo Button */
.btn-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

    .btn-outline-primary:hover {
        background-color: var(--color-primary);
        color: white !important;
    }

/* Log In Button - uses inline style, better to move here */
.btn[style*="background-color: var(--color-primary-dark)"] {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: white !important;
}

    .btn[style*="background-color: var(--color-primary-dark)"]:hover {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

/* Remove default link underline */
a {
    text-decoration: none;
}