/* ===========================================================
   EntityNext landing — light editorial theme
   Mirrors the ProcNext marketing design language, with a
   violet/purple accent in place of ProcNext's emerald.
   Scoped to pages that use _LayoutLight; site.css is left
   untouched so the dark pages (ProcNext, legal) are unaffected.
   =========================================================== */

:root {
    color-scheme: light;

    /* Accent — brand violet (matches the logo mark), used sparingly */
    --accent: #5046dc;
    --accent-hover: #3d33b8;
    --accent-soft: #8b82f0;

    --shadow-soft: 0 1px 2px rgb(5 7 13 / 0.04), 0 12px 32px -12px rgb(5 7 13 / 0.12);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

body {
    background: #ffffff;
    color: #353d4f; /* ink-600 */
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

::selection {
    background: #0a0d16;
    color: #fff;
}

/* Fine grid texture for dark bands */
.bg-grid {
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* Dotted texture for the light hero */
.bg-dots {
    background-image: radial-gradient(rgb(5 7 13 / 0.07) 1px, transparent 0);
    background-size: 26px 26px;
}

/* Soft elevation */
.shadow-soft {
    box-shadow: var(--shadow-soft);
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Ambient aura — slow opacity breathing on background glows */
@keyframes aura {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.animate-aura {
    animation: aura 9s ease-in-out infinite;
}

/* Soft pulsing violet halo for AI elements */
@keyframes ai-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgb(80 70 220 / 0); }
    50%      { box-shadow: 0 0 18px 1px rgb(139 130 240 / 0.55); }
}

.animate-ai-glow {
    animation: ai-glow 4.5s ease-in-out infinite;
}

/* Blinking caret for the AI prompt cue */
@keyframes caret {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.animate-caret {
    animation: caret 1.1s step-end infinite;
}

/* Animated workflow path — dashes travelling along the connectors */
.flow-path {
    stroke-dasharray: 5 7;
    animation: flow-dash 6s linear infinite;
}

@keyframes flow-dash {
    to { stroke-dashoffset: -120; }
}

@media (prefers-reduced-motion: reduce) {
    .animate-aura,
    .animate-ai-glow,
    .animate-caret,
    .flow-path {
        animation: none;
    }
}

/* Navbar shell — transparent at top, white blur once scrolled */
.nav-shell {
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

.nav-shell.is-scrolled {
    background-color: rgb(255 255 255 / 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #ebecf0; /* ink-100 */
}

/* FAQ accordion */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon { transition: transform 0.2s ease; }
.faq-item[open] summary .faq-icon { transform: rotate(45deg); }

/* Form field error state */
.form-error {
    border-color: rgb(220 38 38 / 0.55) !important;
    background-color: rgb(220 38 38 / 0.03) !important;
}

.form-error:focus {
    outline: none !important;
    border-color: rgb(220 38 38 / 0.8) !important;
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.1) !important;
}

.error-message {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
}

.error-message i { font-size: 0.72rem; }