/* Core Variables replicating the screenshots */
:root {
    --primary-bg: #141b2e; /* Dark Blue from top/footer */
    --footer-bg: #0b1120;
    --accent-blue: #6366f1;
    --accent-green: #10b981;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8fafc;
}

/* Header & Hero Area */
.site-navbar, .hero-section {
    background-color: var(--primary-bg);
}

.hero-section {
    /* Optional: Add radial gradient/particles background if desired */
    background-image: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
    overflow: hidden;
}

/* Ensure curve effect from image exists (Optional but nice) */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: #ffffff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 1;
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

/* Form Styling */
.form-card {
    background-color: #242b3d; /* Fallback if you want the dark card, or use bg-white in HTML for white */
    border-radius: 16px;
}

.form-card (if white as in screenshot) {
    background-color: #ffffff;
}

.cursor-pointer {
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.btn-success {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
}

/* Footer Styling */
.site-footer {
    background-color: var(--footer-bg);
}

.hover-white:hover {
    color: #ffffff !important;
}

.letter-spacing-1 {
    letter-spacing: 1px;
}



/* --- New Link Generator Section Styles --- */
.generate-section {
    background-color: #fcfdff !important;
}

.z-index-2 {
    z-index: 2;
}

/* Action Buttons (Pills) */
.btn-action {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    transition: all 0.2s ease-in-out;
}

.btn-action:hover {
    transform: translateY(-2px);
}

.active-red {
    background-color: #fe4d60; /* Coral Red */
    color: #ffffff;
    border: 1px solid #fe4d60;
}
.active-red:hover {
    background-color: #e53e50;
    color: #ffffff;
}

.inactive-blue {
    background-color: #1e40ff; /* Vibrant Blue */
    color: #ffffff;
    border: 1px solid #1e40ff;
}
.inactive-blue:hover {
    background-color: #1530db;
    color: #ffffff;
}

/* Custom Input Fields */
.custom-input {
    border: 1px solid #d1d5db;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    color: #374151;
    background-color: #ffffff;
}

.custom-input:focus {
    border-color: #1e40ff;
    box-shadow: 0 0 0 0.25rem rgba(30, 64, 255, 0.1);
}

.custom-input::placeholder {
    color: #9ca3af;
}

/* Generate Submit Button */
.btn-generate {
    background-color: #0b24fa; /* Deep vibrant blue from image */
    color: #ffffff;
    font-size: 1.1rem;
    transition: background-color 0.2s ease;
    width: 250px;
}

.btn-generate:hover {
    background-color: #081bc2;
    color: #ffffff;
}