/*
 * TwinCore color modes
 * Both modes intentionally remain light and accessible; only the brand palette changes.
 */
:root,
html[data-site-theme="moon"] {
    color-scheme: light;
    --site-primary: #0871b9;
    --site-primary-dark: #07548f;
    --site-primary-text: #07548f;
    --site-action-hover: #064775;
    --site-accent: #0b789e;
    --site-accent-soft: #eef8fc;
    --site-surface-soft: #f6fafc;
    --site-border: #cce4ee;
    --site-header-start: #0871b9;
    --site-header-end: #0b789e;
    --site-header-muted: #effcff;
    --site-page-start: #f7fafc;
    --site-page-end: #ffffff;
    --site-footer: #08699f;
    --site-hero-start: #0a68a8;
    --site-hero-mid: #0871b9;
    --site-hero-end: #0b7d9f;
    --site-hero-glow: rgba(255, 255, 255, 0.12);
    --site-hero-glow-soft: rgba(255, 255, 255, 0.08);
    --site-section-light: #ffffff;
    --site-section-soft: #f6fafc;
    --site-section-dark-start: #0a68a8;
    --site-section-dark-end: #0b7d9f;
    --site-shadow-soft: rgba(15, 23, 42, 0.04);
    --site-shadow: rgba(15, 23, 42, 0.07);
    --site-shadow-strong: rgba(15, 23, 42, 0.1);
    --site-card: #ffffff;
    --site-card-soft: #f6fafc;
    --site-card-border: #cce4ee;
    --site-card-text: #0f172a;
    --site-card-muted: #526173;

    --primary: var(--site-primary);
    --primary-dark: var(--site-primary-dark);
    --secondary: #087fa8;
    --secondary-dark: #0758b0;
    --blue-50: var(--site-surface-soft);
    --blue-100: #d9f4ff;
    --blue-600: var(--site-primary);
    --blue-700: var(--site-primary-dark);
    --bs-primary: var(--site-primary);
    --bs-primary-rgb: 8, 113, 185;
    --bs-link-color: var(--site-primary-dark);
    --bs-link-hover-color: #064775;
}

html[data-site-theme="sun"] {
    --site-primary: #ff6b00;
    --site-primary-dark: #c2410c;
    --site-primary-text: #9a3412;
    --site-action-hover: #9a3412;
    --site-accent: #f59e0b;
    --site-accent-soft: #fff4e8;
    --site-surface-soft: #fff9f3;
    --site-border: #ffd1ad;
    --site-header-start: #ff6b00;
    --site-header-end: #d9480f;
    --site-header-muted: #fff7ed;
    --site-page-start: #fffaf5;
    --site-page-end: #ffffff;
    --site-footer: #7c2d12;
    --site-hero-start: #ff6b00;
    --site-hero-mid: #f97316;
    --site-hero-end: #c2410c;
    --site-hero-glow: rgba(255, 255, 255, 0.12);
    --site-hero-glow-soft: rgba(255, 255, 255, 0.08);
    --site-section-light: #ffffff;
    --site-section-soft: #fff4e8;
    --site-section-dark-start: #c2410c;
    --site-section-dark-end: #9a3412;
    --site-shadow-soft: rgba(15, 23, 42, 0.04);
    --site-shadow: rgba(15, 23, 42, 0.07);
    --site-shadow-strong: rgba(15, 23, 42, 0.1);
    --site-card: #ffffff;
    --site-card-soft: #fff7ed;
    --site-card-border: #ffd1ad;
    --site-card-text: #241812;
    --site-card-muted: #6f5144;

    --primary: var(--site-primary);
    --primary-dark: var(--site-primary-dark);
    --secondary: #f59e0b;
    --secondary-dark: #b45309;
    --blue-50: var(--site-surface-soft);
    --blue-100: #ffedd5;
    --blue-600: var(--site-primary);
    --blue-700: var(--site-primary-dark);
    --bs-primary: var(--site-primary);
    --bs-primary-rgb: 255, 107, 0;
    --bs-link-color: var(--site-primary-dark);
    --bs-link-hover-color: #9a3412;
}

body {
    transition: background-color 220ms ease, color 220ms ease;
}

html[data-site-theme] body {
    background: linear-gradient(180deg, var(--site-page-start), var(--site-page-end));
}

/* Shared navigation and footer */
html[data-site-theme] .site-header {
    background: var(--site-header-start);
    box-shadow: 0 10px 28px var(--site-shadow-strong);
}

html[data-site-theme] .site-header::before {
    background: color-mix(in srgb, var(--site-header-muted) 48%, transparent);
}

html[data-site-theme] .header-topbar {
    background: color-mix(in srgb, var(--site-header-start) 84%, transparent);
    color: var(--site-header-muted);
}

html[data-site-theme] .header-bottom,
html[data-site-theme] .mobile-bottom-bar {
    border-color: color-mix(in srgb, var(--site-border) 20%, transparent);
    background: color-mix(in srgb, var(--site-header-start) 92%, transparent);
    box-shadow: 0 8px 24px var(--site-shadow);
}

html[data-site-theme] .header-promo-badge,
html[data-site-theme] .nav-link:hover,
html[data-site-theme] .nav-link:focus,
html[data-site-theme] .mobile-bottom-item:hover,
html[data-site-theme] .mobile-bottom-item.active {
    background: color-mix(in srgb, var(--site-primary) 17%, transparent);
}

html[data-site-theme] .header-promo-badge,
html[data-site-theme] .header-promo-link,
html[data-site-theme] .header-topbar-right a,
html[data-site-theme] .nav-link:hover,
html[data-site-theme] .nav-link:focus,
html[data-site-theme] .mobile-bottom-item:hover,
html[data-site-theme] .mobile-bottom-item.active {
    color: color-mix(in srgb, var(--site-accent-soft) 86%, white) !important;
}

html[data-site-theme] .btn-header-cta,
html[data-site-theme] .btn-mobile-cta,
html[data-site-theme] .btn-view-all {
    background: var(--site-primary-dark);
    box-shadow: 0 8px 20px var(--site-shadow);
}

html[data-site-theme] .mobile-sidebar {
    background: #ffffff;
}

html[data-site-theme] .mobile-menu-item:hover,
html[data-site-theme] .mobile-menu-item.active {
    color: var(--site-primary-dark);
    background: var(--site-accent-soft);
}

html[data-site-theme] .mobile-category-group {
    border-left-color: var(--site-accent);
}

html[data-site-theme] .custom-footer {
    background-color: var(--site-footer);
    color: rgba(255, 255, 255, 0.92);
}

html[data-site-theme] .custom-footer .footer-heading {
    color: #ffffff;
}

html[data-site-theme] .custom-footer .footer-description,
html[data-site-theme] .custom-footer .footer-copyright {
    color: rgba(255, 255, 255, 0.76);
}

html[data-site-theme] .custom-footer a,
html[data-site-theme] .custom-footer .footer-cookie-settings {
    color: rgba(255, 255, 255, 0.8);
}

html[data-site-theme] .custom-footer a:hover,
html[data-site-theme] .custom-footer a:focus-visible,
html[data-site-theme] .custom-footer .footer-cookie-settings:hover,
html[data-site-theme] .custom-footer .footer-cookie-settings:focus-visible,
html[data-site-theme] .footer-logo {
    color: #ffffff;
}

html[data-site-theme] .custom-footer .border-top-gray {
    border-top-color: rgba(255, 255, 255, 0.16);
}

html[data-site-theme] .custom-footer a:focus-visible,
html[data-site-theme] .custom-footer .footer-cookie-settings:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.76);
    outline-offset: 3px;
}

/* Desktop mega dropdowns and their mobile equivalents */
html[data-site-theme] .app-mega-menu,
html[data-site-theme] .app-category-mega {
    border-color: var(--site-border) !important;
    background: #ffffff !important;
    box-shadow:
        0 16px 40px var(--site-shadow-strong),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
}

html[data-site-theme] .app-mega-header {
    color: var(--site-primary-dark);
}

html[data-site-theme] .app-mega-header .text-muted {
    color: #64748b !important;
}

html[data-site-theme] .app-mega-item,
html[data-site-theme] .category-item {
    border-color: transparent;
    color: #334155;
}

html[data-site-theme] .app-mega-item:hover,
html[data-site-theme] .category-item:not(.is-disabled):hover {
    border-color: var(--site-border);
    background: var(--site-surface-soft);
}

html[data-site-theme] .category-item.is-disabled:hover {
    border-color: transparent;
    background: transparent;
    transform: none;
}

html[data-site-theme] .app-item-title,
html[data-site-theme] .category-item-title {
    color: #0f172a;
}

html[data-site-theme] .app-item-desc,
html[data-site-theme] .category-item-desc {
    color: #64748b;
}

html[data-site-theme] .category-title {
    border-color: var(--site-border);
    color: var(--site-primary-dark);
    background: var(--site-surface-soft);
}

html[data-site-theme] .category-mega-container {
    scrollbar-color: color-mix(in srgb, var(--site-accent) 55%, transparent) transparent;
}

html[data-site-theme] .category-actions {
    border-top-color: var(--site-border);
}

html[data-site-theme] .btn-load-more {
    border-color: var(--site-border);
    color: var(--site-primary-dark);
    background: var(--site-surface-soft);
}

html[data-site-theme] .btn-load-more:hover {
    color: var(--site-primary-dark);
    background: var(--site-accent-soft);
}

html[data-site-theme] .btn-view-all,
html[data-site-theme] .btn-view-all:hover {
    color: #ffffff;
    background: var(--site-primary-dark);
}

html[data-site-theme] .mobile-product-title {
    color: var(--site-primary-dark);
}

html[data-site-theme] .mobile-product-desc {
    color: color-mix(in srgb, var(--site-accent) 74%, var(--gray-600));
}

html[data-site-theme] .app-item-icon,
html[data-site-theme] .category-item-icon,
html[data-site-theme] .mobile-product-icon {
    border-color: var(--site-border);
    background: var(--site-surface-soft) !important;
    box-shadow: none;
}

html[data-site-theme] .app-item-icon i,
html[data-site-theme] .category-item-icon i,
html[data-site-theme] .mobile-product-icon i {
    color: var(--site-primary-dark) !important;
}

/* Theme selector */
.site-theme-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--site-border) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-header-start) 48%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-theme-option {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    border: 0;
    border-radius: 999px;
    color: var(--site-header-muted);
    background: transparent;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.header-topbar .site-theme-switch {
    gap: 0.12rem;
    padding: 0.14rem;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

.header-topbar .site-theme-option {
    min-width: 25px;
    min-height: 25px;
    padding: 0.25rem;
    font-size: 0.72rem;
}

.site-theme-option:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.site-theme-option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--site-accent) 52%, white);
    outline-offset: 2px;
}

html[data-site-theme="sun"] [data-site-theme-option="sun"] {
    color: #ffffff;
    background: var(--site-primary-dark);
    box-shadow: none;
}

html[data-site-theme="moon"] [data-site-theme-option="moon"] {
    color: #ffffff;
    background: var(--site-primary-dark);
    box-shadow: none;
}

.mobile-theme-control {
    display: grid;
    gap: 0.5rem;
}

.mobile-theme-label {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.mobile-theme-control .site-theme-switch {
    width: 100%;
    border-color: #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.mobile-theme-control .site-theme-option {
    color: #64748b;
}

/* Bootstrap accents follow the chosen palette. */
html[data-site-theme] .btn-primary {
    --bs-btn-bg: var(--site-primary-dark);
    --bs-btn-border-color: var(--site-primary-dark);
    --bs-btn-hover-bg: var(--site-action-hover);
    --bs-btn-hover-border-color: var(--site-action-hover);
    --bs-btn-active-bg: var(--site-action-hover);
    --bs-btn-active-border-color: var(--site-action-hover);
}

html[data-site-theme] .btn-outline-primary {
    --bs-btn-color: var(--site-primary-text);
    --bs-btn-border-color: var(--site-primary-text);
    --bs-btn-hover-bg: var(--site-primary-dark);
    --bs-btn-hover-border-color: var(--site-primary-dark);
    --bs-btn-active-bg: var(--site-action-hover);
    --bs-btn-active-border-color: var(--site-action-hover);
}

html[data-site-theme] .text-primary {
    color: var(--site-primary-text) !important;
}

html[data-site-theme] .bg-primary {
    background-color: var(--site-primary-dark) !important;
}

/* Service page palette */
html[data-site-theme] .service-type-eyebrow,
html[data-site-theme] .ready-services-heading-copy > span,
html[data-site-theme] .ready-filter-label i {
    color: var(--site-primary-text);
}

html[data-site-theme] .service-type-ready {
    --service-type-accent: var(--site-primary);
    --service-type-border: var(--site-border);
    --service-type-soft: var(--site-surface-soft);
}

html[data-site-theme="moon"] .service-type-development {
    --service-type-accent: #087fa8;
    --service-type-border: #b8e9f8;
    --service-type-soft: #eaf9ff;
}

html[data-site-theme="sun"] .service-type-development {
    --service-type-accent: #e5484d;
    --service-type-border: #fecaca;
    --service-type-soft: #fff1f2;
}

html[data-site-theme] .service-catalog-section {
    border-color: color-mix(in srgb, var(--site-border) 80%, white);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), color-mix(in srgb, var(--site-surface-soft) 86%, white));
    box-shadow: 0 30px 80px -48px color-mix(in srgb, var(--site-primary) 50%, transparent);
}

html[data-site-theme] body::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--site-primary) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--site-primary) 5%, transparent) 1px, transparent 1px);
}

html[data-site-theme] .ready-services-backdrop::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--site-accent) 18%, transparent), transparent 68%);
}

html[data-site-theme] .ready-services-backdrop::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--site-primary) 13%, transparent), transparent 70%);
}

html[data-site-theme] .ready-stat-card {
    border-color: color-mix(in srgb, var(--site-border) 82%, white);
}

html[data-site-theme] .ready-stat-card strong,
html[data-site-theme] .category-icon {
    color: var(--site-primary-dark);
}

html[data-site-theme] .category-icon {
    border-color: var(--site-border);
    background: var(--site-accent-soft);
}

html[data-site-theme] .ready-filter-panel .filter-chip:hover {
    border-color: var(--site-border);
    background: var(--site-surface-soft);
}

html[data-site-theme] .ready-filter-panel .filter-chip.active {
    background: var(--site-primary-dark);
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--site-primary) 85%, transparent);
}

html[data-site-theme] .project-services-section {
    background: linear-gradient(135deg, var(--site-hero-start), var(--site-hero-end));
}

html[data-site-theme] .project-section-heading > span,
html[data-site-theme] .project-service-category {
    color: color-mix(in srgb, var(--site-accent-soft) 82%, white);
}

html[data-site-theme] .project-filter-link:hover,
html[data-site-theme] .project-filter-link.is-active,
html[data-site-theme] .project-quote-link {
    border-color: var(--site-accent-soft);
    color: var(--site-hero-mid);
    background: var(--site-accent-soft);
}

/* Page heroes share the selected mode instead of retaining hard-coded hues. */
html[data-site-theme] .hero-section,
html[data-site-theme] .about-section.about-hero {
    background: var(--site-hero-start);
}

html[data-site-theme] .hero-overlay,
html[data-site-theme] .about-hero-overlay {
    background: linear-gradient(110deg, color-mix(in srgb, var(--site-hero-start) 92%, transparent), color-mix(in srgb, var(--site-hero-end) 72%, transparent));
}

html[data-site-theme] .hero-shape-one,
html[data-site-theme] .about-hero-shape-one {
    background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--site-accent-soft) 82%, white), color-mix(in srgb, var(--site-primary) 20%, transparent) 62%, transparent 72%);
}

html[data-site-theme] .hero-shape-two,
html[data-site-theme] .about-hero-shape-two {
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--site-accent) 42%, transparent), transparent 70%);
}

html[data-site-theme] .hero-copy h1 span {
    background: var(--site-header-muted);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-site-theme] .hero-services::before {
    background: linear-gradient(135deg, color-mix(in srgb, var(--site-accent-soft) 14%, transparent), transparent 45%);
}

html[data-site-theme] .hero-services-kicker,
html[data-site-theme] .hero-service-icon,
html[data-site-theme] .about-hero .about-kicker,
html[data-site-theme] .contact-eyebrow,
html[data-site-theme] .portfolio-eyebrow,
html[data-site-theme] .payment-kicker,
html[data-site-theme] .legal-kicker,
html[data-site-theme] .legal-updated {
    color: color-mix(in srgb, var(--site-accent-soft) 82%, white);
}

html[data-site-theme] .contact-hero,
html[data-site-theme] .portfolio-hero {
    background: linear-gradient(135deg, var(--site-hero-start), var(--site-hero-end));
}

html[data-site-theme] .payment-hero,
html[data-site-theme] .legal-hero {
    background: linear-gradient(135deg, var(--site-hero-start), var(--site-hero-end));
}

html[data-site-theme] .svc-hero {
    --svc-accent: var(--site-primary);
    background: linear-gradient(135deg, var(--site-hero-start), var(--site-hero-end));
}

html[data-site-theme] .plan-detail-page {
    --plan-accent: var(--site-primary);
    background: linear-gradient(180deg, var(--site-section-soft) 0%, #ffffff 34%, var(--site-page-end) 100%);
}

html[data-site-theme] .plan-detail-hero {
    background: var(--site-section-soft);
}

/* Home page sections */
html[data-site-theme] .home-section {
    --section-shape-primary: color-mix(in srgb, var(--site-primary) 12%, transparent);
    --section-shape-secondary: color-mix(in srgb, var(--site-accent) 11%, transparent);
    --section-shape-border: color-mix(in srgb, var(--site-primary) 17%, transparent);
    --section-grid-color: color-mix(in srgb, var(--site-primary) 8%, transparent);
    --section-circuit-color: color-mix(in srgb, var(--site-accent) 17%, transparent);
    --section-node-color: color-mix(in srgb, var(--site-accent) 24%, transparent);
}

html[data-site-theme] .section-services,
html[data-site-theme] .section-why,
html[data-site-theme] .section-portfolio,
html[data-site-theme] .section-pricing,
html[data-site-theme] .section-testimonials {
    --section-bg-start: var(--site-section-light);
    --section-bg-end: var(--site-section-soft);
}

html[data-site-theme] .section-ideal,
html[data-site-theme] .section-pain,
html[data-site-theme] .section-features,
html[data-site-theme] .section-categories,
html[data-site-theme] .section-faq,
html[data-site-theme] .section-blog {
    --section-bg-start: var(--site-section-soft);
    --section-bg-end: var(--site-section-light);
}

html[data-site-theme] .section-plan-categories,
html[data-site-theme] .section-process,
html[data-site-theme] .section-stats,
html[data-site-theme] .section-contact,
html[data-site-theme] .cta-section {
    --section-bg-start: var(--site-section-dark-start);
    --section-bg-end: var(--site-section-dark-end);
}

html[data-site-theme] .section-bg-overlay,
html[data-site-theme] #service-models .section-bg-overlay,
html[data-site-theme] #why-twin-core .section-bg-overlay {
    background: linear-gradient(180deg, color-mix(in srgb, var(--site-section-light) 82%, transparent), color-mix(in srgb, var(--site-section-soft) 90%, transparent));
}

html[data-site-theme] .section-with-bg-dark .section-bg-overlay {
    background: color-mix(in srgb, var(--site-primary-dark) 86%, transparent);
}

/* Light content sections and page canvases */
html[data-site-theme] .about-values,
html[data-site-theme] .portfolio-paths-section,
html[data-site-theme] .portfolio-comparison-section,
html[data-site-theme] .legal-page,
html[data-site-theme] .svc-faq-section {
    background: var(--site-section-soft);
}

html[data-site-theme] .about-stack,
html[data-site-theme] .portfolio-works-section,
html[data-site-theme] .portfolio-cta-section,
html[data-site-theme] .svc-related-section {
    background: var(--site-section-light);
}

html[data-site-theme] .about-cta-inner,
html[data-site-theme] .portfolio-cta-card,
html[data-site-theme] .svc-final-cta-inner {
    background: var(--site-primary-dark);
    box-shadow: 0 18px 40px var(--site-shadow);
}

html[data-site-theme] .portfolio-process-section,
html[data-site-theme] .plan-process-band {
    background: var(--site-primary-dark);
}

html[data-site-theme] .portfolio-hero-service-counts i,
html[data-site-theme] .portfolio-path-ready {
    --path-color: var(--site-primary);
}

html[data-site-theme] .portfolio-hero-service-counts a:nth-child(2) i,
html[data-site-theme] .portfolio-path-custom {
    --path-color: var(--site-accent);
}

html[data-site-theme] .portfolio-hero-service-counts a:nth-child(2) i {
    background-color: var(--site-accent);
}

/* Listing, article, payment and checkout canvases */
html[data-site-theme] .blog-page,
html[data-site-theme] .blog-detail-page,
html[data-site-theme] .payment-page,
html[data-site-theme] .contact-page,
html[data-site-theme] .portfolio-page {
    background: linear-gradient(180deg, var(--site-section-soft), #ffffff);
}

html[data-site-theme] .checkout-tech {
    --checkout-bg: var(--site-page-start);
    --checkout-blue: var(--site-primary);
    --checkout-cyan: var(--site-accent);
    background: linear-gradient(180deg, var(--site-section-soft), #ffffff);
}

html[data-site-theme] .checkout-grid,
html[data-site-theme] .plan-detail-grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--site-primary) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--site-primary) 6%, transparent) 1px, transparent 1px);
}

html[data-site-theme] .checkout-glow-a {
    background: color-mix(in srgb, var(--site-primary) 30%, transparent);
}

html[data-site-theme] .checkout-glow-b {
    background: color-mix(in srgb, var(--site-accent) 25%, transparent);
}

/* Shared cards follow the selected mode instead of keeping page-specific hues. */
html[data-site-theme] .insight-card,
html[data-site-theme] .feature-card,
html[data-site-theme] .why-card,
html[data-site-theme] .testimonial-card,
html[data-site-theme] .service-model-card,
html[data-site-theme] .ideal-card,
html[data-site-theme] .category-card,
html[data-site-theme] .portfolio-card,
html[data-site-theme] .step-card,
html[data-site-theme] .pricing-card,
html[data-site-theme] .blog-card,
html[data-site-theme] .home-blog-news-card,
html[data-site-theme] .tech-card,
html[data-site-theme] .team-card,
html[data-site-theme] .contact-social-card,
html[data-site-theme] .portfolio-path-card,
html[data-site-theme] .portfolio-catalog-card,
html[data-site-theme] .service-card,
html[data-site-theme] .ready-stat-card,
html[data-site-theme] .plan-feature-card,
html[data-site-theme] .plan-process-card,
html[data-site-theme] .plan-related-card,
html[data-site-theme] .blog-summary-card,
html[data-site-theme] .blog-filter-card,
html[data-site-theme] .blog-post-card,
html[data-site-theme] .blog-sidebar-card,
html[data-site-theme] .article-card,
html[data-site-theme] .sidebar-card,
html[data-site-theme] .payment-steps-panel,
html[data-site-theme] .payment-step-card,
html[data-site-theme] .payment-form-panel,
html[data-site-theme] .bank-panel,
html[data-site-theme] .support-card,
html[data-site-theme] .faq-panel,
html[data-site-theme] .checkout-panel,
html[data-site-theme] .checkout-summary,
html[data-site-theme] .legal-summary,
html[data-site-theme] .legal-contact,
html[data-site-theme] .contact-form-card,
html[data-site-theme] .svc-included-card,
html[data-site-theme] .svc-feature-card,
html[data-site-theme] .svc-related-card {
    border-color: var(--site-card-border);
    background: var(--site-card);
    box-shadow: 0 10px 26px var(--site-shadow-soft);
}

/* Support is a colored callout, so keep its white copy readable in every theme. */
html[data-site-theme] .support-card {
    border-color: color-mix(in srgb, var(--site-primary) 58%, white);
    background: linear-gradient(135deg, var(--site-hero-start), var(--site-hero-end));
    box-shadow: 0 14px 32px var(--site-shadow);
}

html[data-site-theme] .insight-card:hover,
html[data-site-theme] .feature-card:hover,
html[data-site-theme] .why-card:hover,
html[data-site-theme] .testimonial-card:hover,
html[data-site-theme] .service-model-card:hover,
html[data-site-theme] .ideal-card:hover,
html[data-site-theme] .category-card:hover,
html[data-site-theme] .portfolio-card:hover,
html[data-site-theme] .pricing-card:hover,
html[data-site-theme] .blog-card:hover,
html[data-site-theme] .home-blog-news-card:hover,
html[data-site-theme] .tech-card:hover,
html[data-site-theme] .team-card:hover,
html[data-site-theme] .contact-social-card:hover,
html[data-site-theme] .portfolio-path-card:hover,
html[data-site-theme] .portfolio-catalog-card:hover,
html[data-site-theme] .service-card:hover,
html[data-site-theme] .plan-feature-card:hover,
html[data-site-theme] .plan-related-card:hover,
html[data-site-theme] .blog-post-card:hover,
html[data-site-theme] .article-card:hover,
html[data-site-theme] .svc-feature-card:hover,
html[data-site-theme] .svc-related-card:hover {
    border-color: var(--site-primary);
    box-shadow: 0 14px 32px var(--site-shadow);
}

html[data-site-theme] .service-card::before,
html[data-site-theme] .category-card-topline {
    background: var(--site-primary);
}

html[data-site-theme] .tech-card::before,
html[data-site-theme] .team-card::before {
    background: transparent;
    border-top-color: var(--site-primary);
}

html[data-site-theme] .tech-card > * {
    position: relative;
    z-index: 1;
}

html[data-site-theme] .tech-card h3 {
    color: var(--site-card-text);
}

html[data-site-theme] .tech-card .text-muted {
    color: var(--site-card-muted) !important;
}

html[data-site-theme] .tech-card .tech-icon {
    border: 1px solid var(--site-card-border);
    color: var(--site-primary-text);
    background: var(--site-card-soft);
}

html[data-site-theme] .service-card::after {
    background: none;
}

html[data-site-theme] .category-card {
    --tile-color: var(--site-primary-text) !important;
}

html[data-site-theme] .service-card {
    --service-accent: var(--site-primary-text) !important;
}

html[data-site-theme] .portfolio-path-card {
    --path-color: var(--site-primary-text) !important;
}

html[data-site-theme] .portfolio-catalog-card {
    --work-color: var(--site-primary-text) !important;
}

html[data-site-theme] .plan-detail-page,
html[data-site-theme] .plan-feature-card,
html[data-site-theme] .plan-process-card,
html[data-site-theme] .plan-related-card {
    --plan-accent: var(--site-primary-text) !important;
}

html[data-site-theme] .service-detail,
html[data-site-theme] .svc-included-card,
html[data-site-theme] .svc-feature-card,
html[data-site-theme] .svc-related-card {
    --svc-accent: var(--site-primary-text) !important;
}

html[data-site-theme] .feature-card .icon-box,
html[data-site-theme] .insight-card .icon-box,
html[data-site-theme] .service-model-card .icon-box,
html[data-site-theme] .ideal-card .icon-box,
html[data-site-theme] .service-card .icon-box,
html[data-site-theme] .plan-feature-icon,
html[data-site-theme] .plan-related-icon,
html[data-site-theme] .portfolio-path-icon {
    border: 1px solid var(--site-card-border);
    color: var(--site-primary-dark);
    background: var(--site-card-soft);
    box-shadow: none;
}

html[data-site-theme] .pricing-card-featured {
    border-color: var(--site-primary);
}

html[data-site-theme] .service-card .icon-box,
html[data-site-theme] .service-card:hover .icon-box {
    border-color: transparent;
    color: #ffffff !important;
    background: var(--service-accent, var(--site-primary-dark));
}

/* Cards placed inside colored heroes use a light, readable surface. */
html[data-site-theme] .hero-product-ui .hero-services-kicker {
    color: var(--site-primary-dark);
}

html[data-site-theme] .hero-service-card,
html[data-site-theme] .portfolio-hero-summary,
html[data-site-theme] .project-service-card {
    border-color: var(--site-card-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px var(--site-shadow);
    backdrop-filter: blur(10px);
}

html[data-site-theme] .hero-service-card:hover,
html[data-site-theme] .project-service-card:hover {
    border-color: var(--site-primary);
    background: #ffffff;
    box-shadow: 0 16px 34px var(--site-shadow);
}

html[data-site-theme] .hero-service-card h3,
html[data-site-theme] .project-service-card h3,
html[data-site-theme] .project-service-price strong,
html[data-site-theme] .portfolio-hero-service-counts strong {
    color: var(--site-card-text);
}

html[data-site-theme] .hero-service-card > p,
html[data-site-theme] .hero-service-card li,
html[data-site-theme] .project-service-card > p,
html[data-site-theme] .project-service-features li,
html[data-site-theme] .project-service-price span,
html[data-site-theme] .portfolio-hero-summary > p,
html[data-site-theme] .portfolio-hero-service-counts span {
    color: var(--site-card-muted);
}

html[data-site-theme] .hero-service-icon,
html[data-site-theme] .project-service-icon,
html[data-site-theme] .portfolio-hero-service-counts i,
html[data-site-theme] .portfolio-hero-service-counts a:nth-child(2) i {
    border-color: var(--site-card-border);
    color: var(--site-primary-dark);
    background: var(--site-card-soft);
}

html[data-site-theme] .hero-service-link,
html[data-site-theme] .project-service-category,
html[data-site-theme] .portfolio-hero-summary > span,
html[data-site-theme] .hero-service-card li i,
html[data-site-theme] .project-service-features i {
    color: var(--site-primary-dark);
}

html[data-site-theme] .portfolio-hero-service-counts a {
    border-color: var(--site-card-border);
    color: var(--site-card-text);
    background: var(--site-card-soft);
}

html[data-site-theme] .portfolio-hero-service-counts a:hover {
    border-color: var(--site-primary);
    background: var(--site-accent-soft);
}

html[data-site-theme] .project-service-price {
    border-top-color: var(--site-card-border);
}

html[data-site-theme] .project-detail-link {
    border-color: var(--site-primary);
    color: var(--site-primary-dark);
}

html[data-site-theme] .project-detail-link:hover,
html[data-site-theme] .project-quote-link,
html[data-site-theme] .project-quote-link:hover {
    border-color: var(--site-primary-dark);
    color: #ffffff;
    background: var(--site-primary-dark);
}

html[data-site-theme] .project-services-cta {
    border-color: var(--site-card-border);
    background: rgba(255, 255, 255, 0.96);
}

html[data-site-theme] .project-services-cta span {
    color: var(--site-primary-dark);
}

html[data-site-theme] .project-services-cta h3 {
    color: var(--site-card-text);
}

html[data-site-theme] .project-services-cta p {
    color: var(--site-card-muted);
}

html[data-site-theme] .metric-card,
html[data-site-theme] .payment-hero-panel {
    border-color: var(--site-card-border);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px var(--site-shadow-soft);
}

html[data-site-theme] .metric-card span,
html[data-site-theme] .panel-topline span,
html[data-site-theme] .hero-metrics span {
    color: var(--site-card-muted);
}

html[data-site-theme] .metric-card strong,
html[data-site-theme] .hero-metrics strong {
    color: var(--site-card-text);
}

html[data-site-theme] .signal-bars i,
html[data-site-theme] .signal-line span {
    background: var(--site-primary);
}

html[data-site-theme] .hero-metrics div,
html[data-site-theme] .payment-step-card {
    border-color: var(--site-card-border);
    background: var(--site-card-soft);
}

/* Keep depth airy: colored shadows replace the old black/navy cast. */
html[data-site-theme] {
    background: var(--site-page-end);
}

html[data-site-theme] .header-bottom {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--site-border) 18%, transparent);
}

html[data-site-theme] .mobile-bottom-bar {
    box-shadow: 0 -8px 24px var(--site-shadow);
}

html[data-site-theme] .hero-services,
html[data-site-theme] .system-panel,
html[data-site-theme] .contact-message-window {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 36px var(--site-shadow-strong);
}

html[data-site-theme] .blog-filter-card,
html[data-site-theme] .ad-slot,
html[data-site-theme] .blog-post-card,
html[data-site-theme] .article-card,
html[data-site-theme] .sidebar-card,
html[data-site-theme] .faq-panel,
html[data-site-theme] .checkout-panel,
html[data-site-theme] .payment-step-card,
html[data-site-theme] .plan-includes-panel,
html[data-site-theme] .svc-offer-card,
html[data-site-theme] .svc-included-card,
html[data-site-theme] .svc-feature-card,
html[data-site-theme] .svc-related-card,
html[data-site-theme] .contact-form-card {
    border-color: color-mix(in srgb, var(--site-border) 72%, white);
    box-shadow: 0 18px 44px var(--site-shadow-soft);
}

html[data-site-theme] .blog-post-card:hover,
html[data-site-theme] .article-card:hover,
html[data-site-theme] .svc-feature-card:hover,
html[data-site-theme] .svc-related-card:hover {
    box-shadow: 0 22px 48px var(--site-shadow);
}

/* Blog detail advertising card */
html[data-site-theme] .sidebar-card.detail-ad-card {
    border: 1px solid var(--site-card-border);
    background: linear-gradient(145deg, var(--site-card) 0%, var(--site-card-soft) 100%);
    color: var(--site-card-text);
    box-shadow: 0 14px 32px var(--site-shadow-soft);
}

html[data-site-theme] .detail-ad-card::before,
html[data-site-theme] .detail-ad-card::after {
    z-index: 0;
}

html[data-site-theme] .detail-ad-card::before {
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--site-primary) 14%, transparent), transparent 26%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.76), transparent 42%);
}

html[data-site-theme] .detail-ad-card::after {
    border-color: color-mix(in srgb, var(--site-primary) 22%, transparent);
    background: color-mix(in srgb, var(--site-primary) 7%, transparent);
}

html[data-site-theme] .detail-ad-card > * {
    position: relative;
    z-index: 1;
}

html[data-site-theme] .detail-ad-label {
    border-color: var(--site-card-border);
    background: var(--site-card);
    color: var(--site-primary-text);
}

html[data-site-theme] .detail-ad-icon {
    border-color: var(--site-primary);
    background: var(--site-primary);
    color: #ffffff;
    box-shadow: 0 10px 24px var(--site-shadow);
}

html[data-site-theme] .detail-ad-copy span {
    color: var(--site-primary-text);
}

html[data-site-theme] .detail-ad-copy strong {
    color: var(--site-card-text);
}

html[data-site-theme] .detail-ad-copy p {
    color: var(--site-card-muted);
}

html[data-site-theme] .detail-ad-cta {
    background: var(--site-primary-dark);
    color: #ffffff;
    box-shadow: 0 10px 22px var(--site-shadow);
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

html[data-site-theme] .detail-ad-cta:hover,
html[data-site-theme] .detail-ad-cta:focus-visible {
    background: var(--site-action-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px var(--site-shadow);
}

html[data-site-theme] .blog-summary-search button,
html[data-site-theme] .btn-pay,
html[data-site-theme] .plan-process-number {
    background: var(--site-primary-dark);
    box-shadow: 0 12px 26px var(--site-shadow);
}

html[data-site-theme] .summary-box {
    background: var(--site-primary-dark);
    box-shadow: 0 18px 42px var(--site-shadow);
}

html[data-site-theme] .plan-final-cta {
    background: var(--site-primary-dark);
    box-shadow: 0 22px 48px var(--site-shadow);
}

html[data-site-theme] .plan-category-panel {
    border-color: color-mix(in srgb, var(--site-border) 78%, white);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px var(--site-shadow-soft);
}

html[data-site-theme] .plan-category-panel:hover {
    box-shadow: 0 22px 48px var(--site-shadow);
}

html[data-site-theme] .plan-category-panel > h3,
html[data-site-theme] .plan-preview-item {
    color: #0f172a;
}

html[data-site-theme] .plan-category-panel > p,
html[data-site-theme] .plan-preview-content small,
html[data-site-theme] .plan-preview-arrow,
html[data-site-theme] .plan-category-total {
    color: #64748b;
}

html[data-site-theme] .plan-category-total,
html[data-site-theme] .plan-preview-item {
    border-color: color-mix(in srgb, var(--site-border) 64%, white);
    background: rgba(255, 255, 255, 0.76);
}

html[data-site-theme] .plan-preview-item:hover {
    border-color: color-mix(in srgb, var(--plan-accent) 42%, var(--site-border));
    background: var(--site-section-soft);
}

html[data-site-theme] .plan-category-link {
    border-top-color: color-mix(in srgb, var(--site-border) 68%, white);
    color: var(--site-primary-dark);
}

html[data-site-theme] .portfolio-work-screen {
    box-shadow: 0 20px 44px var(--site-shadow);
}

html[data-site-theme] .svc-final-cta-inner,
html[data-site-theme] .about-cta-inner,
html[data-site-theme] .portfolio-cta-card {
    box-shadow: 0 22px 50px var(--site-shadow);
}

html[data-site-theme] .blog-summary-search i,
html[data-site-theme] .blog-section-kicker,
html[data-site-theme] .blog-count {
    color: var(--site-primary-text);
}

html[data-site-theme] .blog-filter-chip.tag {
    color: var(--site-primary-text);
    background: var(--site-section-soft);
}

html[data-site-theme] .blog-filter-chip:hover,
html[data-site-theme] .blog-filter-chip.active {
    border-color: var(--site-primary-dark);
    background: var(--site-primary-dark);
}

html[data-site-theme] .payment-kicker-dark,
html[data-site-theme] .legal-summary a:hover,
html[data-site-theme] .quote-box {
    color: var(--site-primary-dark);
    background: var(--site-section-soft);
}

html[data-site-theme] .payment-step-card .step-number,
html[data-site-theme] .checkout-section-head > span {
    background: var(--site-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
    body,
    .site-theme-option {
        transition: none;
    }
}