/* ── Demo Form ── */
.demo-form__wrapper {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    backdrop-filter: blur(20px);
}
.demo-form__header { margin-bottom: var(--space-6); }
.demo-form__title {
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--color-text-primary); margin-bottom: var(--space-2);
}
.demo-form__subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); }
.demo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.demo-form__field { margin-bottom: var(--space-3); }
.demo-form__row .demo-form__field { margin-bottom: 0; }
.demo-form__input {
    width: 100%; padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: var(--text-sm);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
    -webkit-appearance: none; appearance: none;
}
.demo-form__input:focus { outline: none; border-color: var(--color-primary); }
.demo-form__input::placeholder { color: var(--color-text-muted); }
select.demo-form__input { cursor: pointer; }

.demo-form__submit {
    width: 100%; padding: var(--space-4);
    background: var(--color-primary-gradient); color: #fff;
    border: none; border-radius: var(--radius-full);
    font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-semibold);
    cursor: pointer; transition: all var(--transition-base);
    box-shadow: var(--shadow-glow-sm); margin-top: var(--space-4);
}
.demo-form__submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.demo-form__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.demo-form__disclaimer {
    text-align: center; font-size: var(--text-xs); color: var(--color-text-muted);
    margin-top: var(--space-3);
}
.demo-form__success { text-align: center; padding: var(--space-8) 0; }
.demo-form__success-icon { font-size: 3rem; display: block; margin-bottom: var(--space-4); }
.demo-form__success h3 { margin-bottom: var(--space-2); }

/* ── Client Logos ── */
.client-logos {
    padding: var(--space-10) 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transform: rotate(-3deg) scale(1.05);
    margin: var(--space-4) 0;
}
:root[data-theme="light"] .client-logos {
    background: rgba(0, 0, 0, 0.04);
}
.client-logos__track {
    display: flex; gap: var(--space-12);
    animation: scrollLogos 30s linear infinite;
}
.client-logos__item {
    flex-shrink: 0; opacity: 0.4;
    font-size: var(--text-lg); font-weight: var(--font-semibold);
    color: var(--color-text-muted); white-space: nowrap;
    transition: opacity var(--transition-fast);
}
.client-logos__item:hover { opacity: 0.7; }
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Testimonials ── */
.testimonial-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}
.testimonial-card { padding: var(--space-6); }
.testimonial-text {
    font-size: var(--text-base); color: var(--color-text-secondary);
    font-style: italic; line-height: 1.7; margin-bottom: var(--space-4);
}
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-avatar {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-primary-gradient);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: var(--font-bold); font-size: var(--text-sm);
}
.testimonial-name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); display: block; }
.testimonial-role { font-size: var(--text-xs); color: var(--color-text-muted); display: block; }

/* ── FAQ ── */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}
.faq-question {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: var(--space-5) 0;
    font-size: var(--text-base); font-weight: var(--font-medium);
    color: var(--color-text-primary);
    text-align: left; cursor: pointer;
    transition: color var(--transition-fast);
}
.faq-question:hover { color: var(--color-primary); }
.faq-chevron { transition: transform var(--transition-base); flex-shrink: 0; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-slow);
}
.faq-item.is-open .faq-answer { max-height: 300px; }
.faq-answer p {
    padding-bottom: var(--space-5);
    font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.7;
}

/* ── Image Placeholder ── */
.image-placeholder {
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-2); padding: var(--space-8);
    min-height: 240px;
}
.image-placeholder__icon { font-size: 2.5rem; }
.image-placeholder__text { font-size: var(--text-sm); color: var(--color-text-muted); }
.screenshot-img {
    width: 100%; max-width: 100%; height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
}
.feature-image .screenshot-img { border-radius: var(--radius-xl); }

/* ── Pain Cards ── */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pain-card {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
}
.pain-card:hover { border-color: var(--color-border-hover); }
.pain-icon { color: var(--color-primary); font-size: var(--text-xl); flex-shrink: 0; }
.pain-text { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ── Module Grid ── */
.module-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.module-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.module-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); font-size: 1.3rem;
}
.module-title-text { font-size: var(--text-lg); font-weight: var(--font-semibold); }
.module-desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }

/* ── Feature Row ── */
.feature-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center;
    padding: var(--space-12) 0;
}
.feature-row--reverse { direction: rtl; }
.feature-row--reverse > * { direction: ltr; }
.feature-content .badge { margin-bottom: var(--space-4); }
.feature-content h3 { margin-bottom: var(--space-4); }
.feature-content p { margin-bottom: var(--space-6); }

/* ── Metrics Grid ── */
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.metric-card {
    text-align: center; padding: var(--space-6);
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}
.metric-value { display: block; font-size: var(--text-3xl); font-weight: var(--font-extrabold); color: var(--color-primary); }
.metric-label { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-2); }

@media (max-width: 1024px) {
    .demo-form__row { grid-template-columns: 1fr; }
    .pain-grid { grid-template-columns: repeat(2, 1fr); }
    .module-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-row { grid-template-columns: 1fr; gap: var(--space-6); }
    .feature-row--reverse { direction: ltr; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pain-grid { grid-template-columns: 1fr; }
    .module-grid { grid-template-columns: 1fr; }
    .metrics-grid { grid-template-columns: 1fr; }
}