/* === Forms Page - Unique Styles ===
   Shared base styles are in functionPages.css
*/

main { overflow: hidden }

a {
            color: var(--accent);
            text-decoration: none;
            transition: color 0.25s ease;
        }

/* =============================================
           ANIMATIONS
        ============================================= */

@keyframes typing {
            0%,80%,100% { transform: scale(1); opacity: .5 }
            40% { transform: scale(1.3); opacity: 1 }
        }

/* Scroll-triggered reveal */

/* =============================================
           SHARED LAYOUT
        ============================================= */

.feature-page { position: relative; width: 100% }

.section-label {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--accent-light);
            color: var(--accent);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 0.35rem 0.9rem;
            border-radius: 2rem;
            margin-bottom: 1rem;
            border: 1px solid var(--accent-mid);
        }

.section-header h2 {
            font-family: var(--font-display);
            font-size: clamp(1.75rem, 3.5vw, 2.5rem);
            font-weight: 400;
            color: var(--text);
            margin-bottom: 0.75rem;
            line-height: 1.25;
        }

.section-header p {
            font-size: 1.1rem;
            color: var(--faded-text);
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.65;
        }

/* =============================================
           HERO (dark, centered — same as Messaging)
        ============================================= */

/* Hero floaters */

.hero-floaters {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

.hero-floater { position: absolute; backdrop-filter: blur(8px) }

@media(max-width:900px) { .hero-floater { display: none } }

/* Left floater: form preview */

.hero-floater.left {
            left: 3%;
            bottom: 12%;
            animation: float-left 8s ease-in-out infinite;
        }

.form-preview-card {
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 14px;
            padding: 14px 16px;
            min-width: 230px;
        }

.form-preview-title {
            font-size: .72rem;
            font-weight: 700;
            color: rgba(255,255,255,.8);
            margin-bottom: 10px;
            font-family: var(--font-body);
        }

.form-field-row {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 8px;
        }

.form-field-label {
            font-size: .6rem;
            color: rgba(255,255,255,.45);
            font-family: var(--font-body);
        }

.form-field-input {
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 6px;
            height: 22px;
            width: 100%;
        }

.form-field-check-row {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 4px;
        }

.form-check-box {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            border: 1px solid rgba(255,255,255,.25);
            flex-shrink: 0;
        }

.form-check-box.checked {
            background: var(--green);
            border-color: var(--green);
        }

.form-check-label {
            font-size: .6rem;
            color: rgba(255,255,255,.5);
            font-family: var(--font-body);
        }

.form-submit-btn {
            margin-top: 10px;
            background: rgba(21,93,238,.4);
            border: 1px solid rgba(21,93,238,.5);
            border-radius: 6px;
            padding: 5px 12px;
            font-size: .6rem;
            color: rgba(255,255,255,.8);
            font-family: var(--font-body);
            font-weight: 600;
        }

/* Right floater: AI chat bubble */

.hero-floater.right {
            right: 3%;
            top: 18%;
            animation: float-right 7s ease-in-out infinite;
        }

.ai-chat-preview {
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 16px;
            width: 200px;
            overflow: hidden;
            padding: 12px;
        }

.ai-chat-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

.ai-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, #155dee, #7c3aed);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .55rem;
            font-weight: 700;
            color: #fff;
            font-family: var(--font-body);
        }

.ai-chat-name {
            font-size: .62rem;
            font-weight: 600;
            color: rgba(255,255,255,.7);
            font-family: var(--font-body);
        }

.ai-msg {
            background: rgba(255,255,255,.06);
            border-radius: 8px;
            padding: 7px 9px;
            font-size: .6rem;
            color: rgba(255,255,255,.55);
            font-family: var(--font-body);
            line-height: 1.4;
            margin-bottom: 6px;
        }

.ai-msg.user {
            background: rgba(21,93,238,.3);
            color: rgba(255,255,255,.75);
            text-align: right;
        }

.ai-typing {
            display: flex;
            gap: 4px;
            padding: 4px 0;
        }

.ai-typing span {
            width: 5px;
            height: 5px;
            background: rgba(255,255,255,.3);
            border-radius: 50%;
            animation: typing 1.2s ease infinite;
        }

.ai-typing span:nth-child(2) { animation-delay: .2s }

.ai-typing span:nth-child(3) { animation-delay: .4s }

/* =============================================
           HOW IT WORKS — 3 STEPS
        ============================================= */

.forms-how {
            padding: 5rem 1.5rem;
            background: var(--element-background);
        }

.steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 1rem;
        }

@media(max-width:768px) {
            .steps-grid { grid-template-columns: 1fr }
        }

.step-card:hover {
            box-shadow: var(--shadow-lg);
            border-color: var(--accent-mid);
            transform: translateY(-4px);
        }

.step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--accent-light);
            color: var(--accent);
            font-weight: 700;
            font-size: 1rem;
            border-radius: 50%;
            margin: 0 auto 1.25rem;
            font-family: var(--font-display);
        }

.step-card h3 {
            font-family: var(--font-display);
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.6rem;
        }

/* =============================================
           DETAIL ROWS — ALTERNATING
        ============================================= */

.forms-detail {
            padding: 1rem 1.5rem 5rem;
        }

.detail-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            padding: 4rem 0;
            border-bottom: 1px solid var(--border);
        }

.detail-row:last-child { border-bottom: none }

.detail-row.flip { direction: rtl }

.detail-row.flip > * { direction: ltr }

@media(max-width:900px) {
            .detail-row { grid-template-columns: 1fr; gap: 2rem }
            .detail-row.flip { direction: ltr }
        }

.detail-text h2 {
            font-family: var(--font-display);
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 400;
            color: var(--text);
            line-height: 1.25;
            margin-bottom: 1rem;
        }

.detail-text h2 span { color: var(--accent) }

.detail-text p {
            font-size: 1.05rem;
            color: var(--faded-text);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }

.feature-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

.feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            font-size: 0.95rem;
            color: var(--text-mid);
        }

.check {
            width: 20px;
            height: 20px;
            background: var(--accent-light);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

.check svg {
            width: 10px;
            height: 10px;
            fill: var(--accent);
        }

.detail-visual {
            display: flex;
            justify-content: center;
            align-items: center;
        }

/* =============================================
           FORM BUILDER MOCKUP
        ============================================= */

.form-builder-mockup {
            background: var(--surface);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--border);
            padding: 1.25rem;
            width: 100%;
            max-width: 380px;
        }

.mockup-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1rem;
        }

.mockup-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            background: var(--accent-light);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

.mockup-icon svg { width: 18px; height: 18px; fill: var(--accent) }

.mockup-title {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--text);
        }

.mockup-subtitle {
            font-size: 0.72rem;
            color: var(--faded-text);
        }

.ai-prompt-row {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

.ai-prompt-input {
            flex: 1;
            background: var(--sec-background);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.55rem 0.75rem;
            font-size: 0.8rem;
            color: var(--text);
            font-family: var(--font-body);
        }

.ai-send-btn {
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            padding: 0 0.75rem;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

.ai-send-btn svg { width: 14px; height: 14px; fill: #fff }

.ai-response {
            background: var(--sec-background);
            border-radius: var(--radius-sm);
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            border-left: 3px solid var(--accent);
        }

.ai-response-label {
            font-size: 0.68rem;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

.ai-response p {
            font-size: 0.8rem;
            color: var(--text-mid);
            line-height: 1.5;
        }

.form-fields-preview {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

.form-field-preview-item {
            background: var(--sec-background);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.5rem 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

.field-type-badge {
            font-size: 0.62rem;
            font-weight: 600;
            color: var(--faded-text);
            background: var(--border);
            border-radius: 4px;
            padding: 2px 6px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            flex-shrink: 0;
        }

.field-name {
            font-size: 0.8rem;
            color: var(--text);
        }

/* =============================================
           ASSIGN PREVIEW MOCKUP
        ============================================= */

.assign-mockup {
            background: var(--surface);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--border);
            padding: 1.25rem;
            width: 100%;
            max-width: 360px;
        }

.assign-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

.assign-title {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--text);
        }

.assign-count {
            font-size: 0.72rem;
            color: var(--faded-text);
        }

.employee-assign-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.55rem 0;
            border-bottom: 1px solid var(--border);
        }

.employee-assign-row:last-child { border-bottom: none }

.emp-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
        }

.emp-avatar.green { background: #16a34a }

.emp-avatar.purple { background: #7c3aed }

.emp-avatar.amber { background: #d97706 }

.emp-info { flex: 1 }

.emp-name { font-size: 0.82rem; font-weight: 600; color: var(--text) }

.emp-role { font-size: 0.7rem; color: var(--faded-text) }

.emp-status {
            font-size: 0.68rem;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 100px;
        }

.emp-status.pending { background: var(--amber-light); color: var(--amber) }

.emp-status.submitted { background: var(--green-light); color: var(--green) }

.emp-status.overdue { background: var(--red-light); color: var(--red) }

/* =============================================
           FEATURES GRID
        ============================================= */

.forms-features {
            padding: 5rem 1.5rem;
            background: var(--sec-background);
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }

@media(max-width:900px) { .features-grid { grid-template-columns: 1fr 1fr } }

@media(max-width:600px) { .features-grid { grid-template-columns: 1fr } }

.feature-tile {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.75rem 1.5rem;
            transition: box-shadow .3s ease, transform .3s ease;
        }

.feature-tile:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-3px);
        }

.tile-icon {
            width: 44px;
            height: 44px;
            background: var(--accent-light);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }

.tile-icon svg { width: 22px; height: 22px; fill: var(--accent) }

.feature-tile h3 {
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.5rem;
        }

.feature-tile p {
            font-size: 0.88rem;
            color: var(--faded-text);
            line-height: 1.6;
        }

/* =============================================
           FAQ
        ============================================= */

.forms-faq {
            margin: 100px 0;
        }

.msg-faq {
            padding: 5rem 1.5rem;
            background: var(--surface-alt);
        }

.faq-list {
            max-width: 720px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

.faq-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            overflow: hidden;
            transition: border-color .25s
        }

.faq-item.open {
                border-color: var(--accent)
            }

.faq-trigger {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            background: none;
            border: none;
            font-family: var(--font-body);
            font-size: .95rem;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            text-align: left;
            gap: 12px
        }

.faq-chevron {
            width: 20px;
            height: 20px;
            fill: var(--text-light);
            transition: transform .3s;
            flex-shrink: 0
        }

.faq-item.open .faq-chevron {
            transform: rotate(180deg)
        }

.faq-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease
        }

.faq-body-inner {
            padding: 0 20px 18px;
            font-size: .9rem;
            color: var(--text-mid);
            line-height: 1.7
        }

/* =============================================
           FOOTER WAVES
        ============================================= */

.footer-waves {
            display: block;
            width: 100%;
            height: 80px;
            margin-bottom: -2px;
        }

.footer-parallax use { animation: move-forever 20s linear infinite }

@keyframes move-forever {
            from { transform: translateX(-48px) }
            to { transform: translateX(48px) }
        }