/* Styles specific to the Welcome index page */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 2rem;
    background: radial-gradient(1200px 400px at -10% -20%, var(--hero-bg-1) 0%, var(--hero-bg-2) 55%, var(--hero-bg-3) 100%);
    color: var(--hero-fg);

    .hero__glow {
        position: absolute;
        inset: 0;
        background: conic-gradient(from 220deg at 120% -10%, var(--hero-glow-cyan), var(--hero-glow-blue), var(--hero-glow-cyan));
        filter: blur(60px);
        opacity: 0.7;
        pointer-events: none;
    }

    .preamble {
        position: relative;
        z-index: 1;
        align-items: center;
        gap: 1rem;
        width: min(100%, 1024px);

        img {
            height: 84px;
            filter: drop-shadow(0 6px 12px var(--img-shadow));
        }

        h1 {
            font-size: clamp(2.25rem, 4vw, 4rem);
            color: var(--analogous-blue-purple);
            letter-spacing: .5px;
            text-shadow: 0 2px 18px var(--hero-title-shadow);
        }

        h2 {
            font-size: clamp(1.1rem, 2vw, 1.75rem);
            color: var(--hero-subtitle);
            font-weight: 400;
        }
    }
}


.value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
    width: min(100%, 1024px);

    .card {
        background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom));
        border: 1px solid var(--card-border);
        border-radius: 12px;
        padding: 1rem;

        & > .card-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;

            &.speed {
                color: var(--accent-speed);
            }

            &.integration {
                color: var(--accent-integration);
            }

            &.reliability {
                color: var(--accent-reliability);
            }
        }

        & > p {
            margin: 0.5rem 0 0;
            color: var(--card-text-subtle);
        }
    }
}

/* Questionnaire card styles */
section {
    &.questionnaire {
        margin: 2rem auto 0;
        width: min(800px, 100%);
        background: var(--panel-bg);
        border-radius: 14px;
        padding: 1rem;
        box-shadow: 0 10px 30px var(--panel-shadow-1), 0 1px 3px var(--panel-shadow-2);
        border: 1px solid var(--panel-border);

        & > .questionnaire-title {
            margin: 0 0 .5rem 0;
            font-size: 1.25rem;
            color: var(--primary);
            font-family: "Orbitron", serif;
            font-weight: 600;
        }

        & > p {
            color: var(--panel-text);
        }

        & > ul {
            margin-top: 0.25rem;
            color: var(--panel-text-strong);
        }

        & > .notice {
            color: var(--notice-fg);
            background: var(--notice-bg);
            border: 1px solid var(--notice-border);
            padding: 0.75rem 1rem;
            border-radius: 10px;
        }

        /* Alerts inside questionnaire */
        & > .alert {
            color: #721c24;
            background: #f8d7da;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
        }

        /* Waitlist inline form layout */
        & > form.waitlist-form {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        & > form.waitlist-form .waitlist-email {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
        }
        & > form.waitlist-form .waitlist-submit {
            padding: 10px 16px;
            border: none;
            background: #111827;
            color: white;
            border-radius: 6px;
            cursor: pointer;
        }

        & > *:last-child {
            margin-bottom: 0;
        }
    }
}