/*
 * Shared page styles for the marketing pages in /pages.
 * Colors follow the homepage: #050505 background, #1890ca -> #5283ff glow,
 * #bacbe6 -> #5584eb headline gradient.
 *
 * Declared in the same layer order as Tailwind v4, so utility classes
 * placed next to these components still win.
 */
@layer theme, base, components, utilities;

@layer components {
    .ec-gradient-text {
        background-image: linear-gradient(90deg, #bacbe6, #5584eb);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .ec-glow {
        position: absolute;
        pointer-events: none;
        border-radius: 9999px;
        background-image: linear-gradient(135deg, #1890ca, #5283ff);
        filter: blur(120px);
        opacity: 0.1;
    }

    .ec-kicker {
        display: inline-block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #5584eb;
        letter-spacing: 0;
    }

    .ec-card {
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 1rem;
    }

    .ec-card-link {
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .ec-card-link:hover {
        border-color: rgba(255, 255, 255, 0.12);
        background-color: rgba(255, 255, 255, 0.035);
    }

    .ec-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.25rem;
        white-space: nowrap;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .ec-btn-primary {
        background-color: #ffffff;
        color: #050505;
        border: 1px solid #ffffff;
    }

    .ec-btn-primary:hover {
        background-color: #e5e7eb;
        border-color: #e5e7eb;
    }

    .ec-btn-secondary {
        background-color: rgba(255, 255, 255, 0.03);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ec-btn-secondary:hover {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .ec-link {
        color: #5584eb;
        transition: color 0.2s ease;
    }

    .ec-link:hover {
        color: #bacbe6;
    }

    .ec-label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #d4d7dc;
    }

    .ec-input {
        width: 100%;
        padding: 0.75rem 1rem;
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        color: #ededed;
        font-size: 0.9375rem;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .ec-input::placeholder {
        color: #5c616b;
    }

    .ec-input:hover {
        border-color: rgba(255, 255, 255, 0.14);
    }

    .ec-input:focus {
        border-color: #5584eb;
        background-color: rgba(255, 255, 255, 0.03);
        box-shadow: 0 0 0 3px rgba(85, 132, 235, 0.18);
    }

    select.ec-input {
        appearance: none;
        cursor: pointer;
        padding-right: 2.75rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
    }

    select.ec-input option {
        background-color: #0a0a0a;
        color: #ededed;
    }

    input[type="file"].ec-input {
        padding: 0.5rem;
        cursor: pointer;
        color: #8a8f98;
    }

    input[type="file"].ec-input::file-selector-button {
        margin-right: 0.75rem;
        padding: 0.4rem 0.9rem;
        border: 0;
        border-radius: 0.375rem;
        background-color: rgba(255, 255, 255, 0.08);
        color: #ededed;
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    input[type="file"].ec-input::file-selector-button:hover {
        background-color: rgba(255, 255, 255, 0.14);
    }

    .ec-alert {
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.9375rem;
        background-color: rgba(85, 132, 235, 0.1);
        border: 1px solid rgba(85, 132, 235, 0.25);
        color: #bacbe6;
    }

    .ec-image {
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.06);
        object-fit: cover;
        width: 100%;
    }
}