/* Global dark/light theme system */

html {
    color-scheme: dark;
}

html[data-theme='light'] {
    color-scheme: light;
    --lt-bg-main: #f4f7ff;
    --lt-bg-alt: #edf2ff;
    --lt-bg-soft: #f8faff;
    --lt-surface: #ffffff;
    --lt-surface-2: #f6f9ff;
    --lt-border: rgba(27, 41, 71, 0.36);
    --lt-border-soft: rgba(27, 41, 71, 0.09);
    --lt-border-hover: rgba(179, 128, 255, 0.7);
    --lt-text: #16213a;
    --lt-text-muted: #3c4a6b;
    --lt-accent: #4b5ee9;
}

body,
header,
nav,
[class*='-section'],
.service-hero,
.service-card,
.detail-card,
.deliverable-card,
.process-card,
.reference-card,
.blog-card,
.why-card,
.metric-card,
.timeline-content,
.stepper-item,
.site-footer,
.footer-container,
.footer-column,
.offer-modal-content,
.offer-form input,
.offer-form textarea,
.offer-form select,
.offer-submit,
.card,
.case-card,
.review-card,
.reviews-cta.card {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.theme-toggle {
    appearance: none;
    position: relative;
    width: 58px;
    height: 32px;
    background: #2a2a2a;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    font-size: 14px;
    gap: 2px;
    color: rgba(255, 255, 255, 0.4);
}

.theme-toggle::before {
    content: '☀️';
    position: absolute;
    left: 8px;
    font-size: 14px;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.theme-toggle::after {
    content: '🌙';
    position: absolute;
    right: 8px;
    font-size: 14px;
    z-index: 1;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

html[data-theme='light'] .theme-toggle {
    background: #e8eaf6;
    border-color: rgba(75, 94, 233, 0.25);
}

html[data-theme='light'] .theme-toggle::before {
    opacity: 0.3;
}

html[data-theme='light'] .theme-toggle::after {
    opacity: 1;
}

.theme-toggle:hover {
    border-color: rgba(116, 116, 220, 0.6);
}

html[data-theme='light'] .theme-toggle:hover {
    border-color: rgba(75, 94, 233, 0.5);
}

.theme-toggle:focus-visible {
    outline: 2px solid #7474dc;
    outline-offset: 2px;
}

.nav-theme-toggle {
    margin-left: 0.35rem;
    flex-shrink: 0;
}

.mobile-theme-toggle {
    width: 100%;
    height: auto;
    border-radius: 16px;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: clamp(1rem, 2.2vw, 1.1rem);
}

.mobile-theme-toggle .theme-icon {
    display: inline-flex;
    font-size: 1.05rem;
}

html[data-theme='light'] body {
    background: linear-gradient(180deg, var(--lt-bg-main) 0%, #eef3ff 100%) !important;
    color: var(--lt-text) !important;
}

html[data-theme='light'] #particles-js,
html[data-theme='light'] #particles-reviews {
    opacity: 0.45;
}

html[data-theme='light'] nav,
html[data-theme='light'] nav.nav-fixed {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(37, 47, 77, 0.16) !important;
    box-shadow: 0 8px 24px rgba(21, 31, 55, 0.08) !important;
}

html[data-theme='light'] .navtag,
html[data-theme='light'] .mobile-navtag,
html[data-theme='light'] .dropdown-menu a,
html[data-theme='light'] .logo-link,
html[data-theme='light'] .mobile-dropdown-menu a {
    color: var(--lt-text) !important;
}

html[data-theme='light'] .dropdown-menu,
html[data-theme='light'] .mobile-menu {
    background: rgba(249, 252, 255, 0.98) !important;
    border-color: rgba(44, 54, 90, 0.14) !important;
}

html[data-theme='light'] .tag-box button.tag,
html[data-theme='light'] .btn-signin-main,
html[data-theme='light'] .btn-secondary,
html[data-theme='light'] .mobile-cta-btn {
    color: var(--lt-text) !important;
    border-color: var(--lt-border) !important;
    background: rgba(255, 255, 255, 0.94) !important;
}

html[data-theme='light'] main::before,
html[data-theme='light'] .service-hero::before,
html[data-theme='light'] .about-section::before,
html[data-theme='light'] .references-section::before,
html[data-theme='light'] .reviews-section::before,
html[data-theme='light'] .reviews-section::after {
    opacity: 0.22 !important;
}

html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3,
html[data-theme='light'] h4,
html[data-theme='light'] .eyebrow,
html[data-theme='light'] .timeline-subtitle,
html[data-theme='light'] .case-card-title,
html[data-theme='light'] .service-card-header h3,
html[data-theme='light'] .service-card-subtitle {
    color: var(--lt-text) !important;
}

/* Keep hero headline readable above video backgrounds. */
html[data-theme='light'] .hero-video .content,
html[data-theme='light'] .hero-video .content h1,
html[data-theme='light'] .hero-video .content p,
html[data-theme='light'] .hero-video .content .description,
html[data-theme='light'] .hero-video .content .eyebrow,
html[data-theme='light'] .hero-video .hero-subtitle {
    color: #f5f8ff !important;
}

html[data-theme='light'] p,
html[data-theme='light'] li,
html[data-theme='light'] small,
html[data-theme='light'] .hero-subtitle,
html[data-theme='light'] .metric-label,
html[data-theme='light'] .timeline-text,
html[data-theme='light'] .reference-card-content p,
html[data-theme='light'] .blog-excerpt,
html[data-theme='light'] .service-features li,
html[data-theme='light'] .service-slice-text {
    color: var(--lt-text-muted) !important;
}

html[data-theme='light'] [class*='-section'],
html[data-theme='light'] .service-hero,
html[data-theme='light'] .service-detail,
html[data-theme='light'] .service-deliverables,
html[data-theme='light'] .service-stats,
html[data-theme='light'] .timeline-section,
html[data-theme='light'] .why-section,
html[data-theme='light'] .case-studies-section,
html[data-theme='light'] .services-overview-section {
    background: var(--lt-bg-main) !important;
    border-color: var(--lt-border-soft) !important;
}

html[data-theme='light'] .about-section,
html[data-theme='light'] .stepper-section {
    background: linear-gradient(180deg, var(--lt-bg-soft) 0%, var(--lt-bg-alt) 100%) !important;
}

html[data-theme='light'] .services-showcase {
    background-color: #f1f5ff !important;
    background-image:
        radial-gradient(circle at 18% -22%, rgba(75, 94, 233, 0.14) 0, transparent 42%),
        radial-gradient(circle at 80% -6%, rgba(119, 136, 255, 0.12) 0, transparent 46%) !important;
    border-top-color: rgba(36, 49, 84, 0.08) !important;
    border-bottom-color: rgba(36, 49, 84, 0.08) !important;
}

html[data-theme='light'] .services-showcase::before {
    background:
        radial-gradient(circle at 28% 30%, rgba(118, 105, 241, 0.2) 0, transparent 56%),
        radial-gradient(circle at 70% 70%, rgba(75, 94, 233, 0.16) 0, transparent 60%),
        radial-gradient(circle at 52% 118%, rgba(187, 199, 255, 0.24) 0, transparent 66%) !important;
    opacity: 0.34 !important;
}

html[data-theme='light'] .services-showcase::after {
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0, rgba(221, 229, 251, 0.46) 60%, rgba(204, 215, 246, 0.62) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(222, 230, 251, 0.56)) !important;
}

html[data-theme='light'] .references-section,
html[data-theme='light'] .blog-section {
    background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%) !important;
}

html[data-theme='light'] .reviews-section {
    background: linear-gradient(180deg, #edf3ff 0%, #e7eeff 100%) !important;
}

html[data-theme='light'] .site-footer {
    background: linear-gradient(180deg, #e7efff 0%, #dce7ff 100%) !important;
    border-top-color: rgba(31, 44, 79, 0.15) !important;
}

html[data-theme='light'] .card,
html[data-theme='light'] .detail-card,
html[data-theme='light'] .deliverable-card,
html[data-theme='light'] .process-card,
html[data-theme='light'] .reference-card,
html[data-theme='light'] .blog-card,
html[data-theme='light'] .why-card,
html[data-theme='light'] .metric-card,
html[data-theme='light'] .timeline-content,
html[data-theme='light'] .stepper-item,
html[data-theme='light'] .case-card,
html[data-theme='light'] .service-card,
html[data-theme='light'] .service-mockup-frame,
html[data-theme='light'] .service-media-image,
html[data-theme='light'] .services-tabs-wrapper,
html[data-theme='light'] .reviews-cta.card,
html[data-theme='light'] .review-card,
html[data-theme='light'] .contact-card,
html[data-theme='light'] .contact-form-container,
html[data-theme='light'] .calendar-embed {
    background: linear-gradient(180deg, var(--lt-surface) 0%, var(--lt-surface-2) 100%) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 12px 30px rgba(33, 48, 82, 0.11) !important;
}

html[data-theme='light'] .services-tab{
    border-color: rgba(116, 116, 220, 0.192) !important;
}

html[data-theme='light'] .metric-card:hover {
    border-color: var(--lt-border-hover) !important;
    transform: translateY(-6px);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

html[data-theme='light'] .service-tab,
html[data-theme='light'] .filter-btn,
html[data-theme='light'] .service-link.secondary,
html[data-theme='light'] .chat-btn.secondary {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1d2846 !important;
    border-color: rgba(32, 44, 75, 0.24) !important;
}

html[data-theme='light'] .service-tab.active,
html[data-theme='light'] .filter-btn.active,
html[data-theme='light'] .service-link.primary,
html[data-theme='light'] .chat-btn.primary,
html[data-theme='light'] .btn-get-started,
html[data-theme='light'] .offer-submit,
html[data-theme='light'] .footer-cta,
html[data-theme='light'] .card-btn.primary,
html[data-theme='light'] #reviews-cta-btn {
    color: #ffffff !important;
}

html[data-theme='light'] .offer-modal-bg {
    background: rgba(244, 247, 255, 0.82) !important;
}

html[data-theme='light'] .offer-modal-content,
html[data-theme='light'] .offer-form input,
html[data-theme='light'] .offer-form textarea,
html[data-theme='light'] .offer-form select,
html[data-theme='light'] .service-dropdown-toggle,
html[data-theme='light'] .service-options,
html[data-theme='light'] .service-option {
    color: #1f2740 !important;
    background: #ffffff !important;
    border-color: rgba(32, 44, 75, 0.18) !important;
}
html[data-theme='light'] .offer-modal-close {
    color: #1f2740 !important;
}

html[data-theme='light'] .chat-header {
    background: linear-gradient(135deg, #6774f7 0%, #3954d7 100%) !important;
}

html[data-theme='light'] .midomedia-chat-window {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
    border-color: rgba(48, 67, 111, 0.18) !important;
    box-shadow: 0 24px 58px rgba(33, 48, 82, 0.16) !important;
}

html[data-theme='light'] .typebot-shell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(244, 248, 255, 0.98) 100%) !important;
}

html[data-theme='light'] .typebot-standard-host::part(container) {
    background: transparent !important;
}

html[data-theme='light'] .typebot-standard-host::part(iframe) {
    border-radius: 0 0 20px 20px;
}

html[data-theme='light'] .typebot-shell-glow {
    background:
        radial-gradient(circle at 12% 8%, rgba(103, 116, 247, 0.14) 0, transparent 26%),
        radial-gradient(circle at 86% 0%, rgba(86, 175, 255, 0.14) 0, transparent 24%) !important;
}

html[data-theme='light'] .chat-fallback {
    background:
        radial-gradient(circle at top right, rgba(103, 116, 247, 0.1) 0, transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
    color: #1f2740 !important;
}

html[data-theme='light'] .chat-fallback p,
html[data-theme='light'] .chat-fallback ul,
html[data-theme='light'] .chat-header-text p {
    color: #eaf0ff !important;
}

html[data-theme='light'] .chat-brand-mark,
html[data-theme='light'] .chat-status-pill {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme='light'] .midomedia-chat-bubble {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18) 0, transparent 36%),
        linear-gradient(135deg, #1c2b5a 0%, #3954d7 55%, #6774f7 100%) !important;
    box-shadow: 0 14px 32px rgba(57, 84, 215, 0.26) !important;
}

html[data-theme='light'] .bubble-icon-wrap {
    background: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme='light'] a,
html[data-theme='light'] .reference-btn,
html[data-theme='light'] .service-link.primary,
html[data-theme='light'] .case-btn {
    color: var(--lt-accent);
}

html[data-theme='light'] .reference-btn {
    border-color: rgba(75, 94, 233, 0.44) !important;
}

html[data-theme='light'] .reference-btn:hover,
html[data-theme='light'] .service-link.primary:hover,
html[data-theme='light'] .case-btn:hover {
    color: #2f42c9 !important;
}

html[data-theme='light'] .messages-area {
    background: #eef2fb !important;
}

html[data-theme='light'] .message-bot .message-content {
    border-color: rgba(32, 44, 75, 0.14) !important;
    color: #1f2740 !important;
}

html[data-theme='light'] .mobile-theme-toggle,
html[data-theme='light'] .theme-toggle {
    color: #1a2133;
    border-color: rgba(34, 44, 79, 0.3);
    background: rgba(255, 255, 255, 0.92);
}

/* Form element text color fixes for light theme */
html[data-theme='light'] .offer-form label,
html[data-theme='light'] label,
html[data-theme='light'] .form-label,
html[data-theme='light'] .stepper-label,
html[data-theme='light'] .tab-label,
html[data-theme='light'] .metric-label,
html[data-theme='light'] .result-label,
html[data-theme='light'] .divider-label {
    color: var(--lt-text) !important;
}

/* Input placeholder text - make visible in light theme */
html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder,
html[data-theme='light'] select::placeholder {
    color: rgba(60, 74, 107, 0.6) !important;
    opacity: 1;
}

/* Text selection background for light theme */
html[data-theme='light'] ::selection {
    background: rgba(75, 94, 233, 0.2);
    color: var(--lt-text);
}

/* Ensure option text is readable */
html[data-theme='light'] option {
    background: #ffffff;
    color: #1f2740;
    padding: 0.5rem;
}

html[data-theme='light'] optgroup {
    color: #1f2740;
    background: #ffffff;
}

@media (max-width: 1024px) {
    .nav-theme-toggle {
        display: none;
    }
}