:root {
    --brand-ink: #222222;
    --brand-graphite: #545454;
    --brand-steel: #7b7b7b;
    --brand-silver: #b9b9b9;
    --brand-ivory: #fcfbfa;
    --brand-cloud: #f5f3f1;
    --brand-line: #e6e1dc;
    --brand-ring: rgba(84, 84, 84, 0.12);
    --brand-glow: rgba(84, 84, 84, 0.18);
    --brand-glow-strong: rgba(34, 34, 34, 0.24);
    --brand-gradient: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-graphite) 56%, var(--brand-steel) 100%);
    --brand-gradient-strong: linear-gradient(135deg, #111111 0%, var(--brand-ink) 48%, var(--brand-graphite) 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(34, 34, 34, 0.08) 0%, rgba(84, 84, 84, 0.04) 100%);
    --light-bg-color: #fcfbfa;
    --light-text-color: #1f2937;
    --light-text-muted: #4b5563;
    --light-text-soft: #6b7280;
    --light-text-subtle: #9ca3af;
    --light-surface-solid: #ffffff;
    --light-surface-color: rgba(255, 255, 255, 0.78);
    --light-surface-alt: #f9fafb;
    --light-surface-hover: #f3f4f6;
    --light-surface-strong: #111827;
    --light-surface-strong-hover: #1f2937;
    --light-surface-strong-glass: rgba(31, 41, 55, 0.52);
    --light-surface-dim: rgba(17, 24, 39, 0.04);
    --light-border-soft: #f3f4f6;
    --light-border-color: #e5e7eb;
    --light-border-contrast: #d1d5db;
    --light-noise-opacity: 0.03;
    --dark-brand-ink: #f8fafc;
    --dark-brand-graphite: #d7e0ec;
    --dark-brand-steel: #90a2bb;
    --dark-brand-silver: #5f7390;
    --dark-brand-ivory: #091018;
    --dark-brand-cloud: #111821;
    --dark-brand-line: rgba(148, 163, 184, 0.18);
    --dark-brand-ring: rgba(148, 163, 184, 0.18);
    --dark-brand-glow: rgba(125, 211, 252, 0.16);
    --dark-brand-glow-strong: rgba(96, 165, 250, 0.24);
    --dark-brand-gradient: linear-gradient(135deg, #f8fafc 0%, #dbe6f2 56%, #7dd3fc 100%);
    --dark-brand-gradient-strong: linear-gradient(135deg, #ffffff 0%, #e2e8f0 48%, #93c5fd 100%);
    --dark-brand-gradient-soft: linear-gradient(135deg, rgba(125, 211, 252, 0.18) 0%, rgba(147, 197, 253, 0.08) 100%);
    --dark-bg-color: #091018;
    --dark-text-color: #edf2f7;
    --dark-text-muted: #c3cedc;
    --dark-text-soft: #98a7bb;
    --dark-text-subtle: #73839a;
    --dark-surface-solid: #111821;
    --dark-surface-color: rgba(17, 24, 33, 0.82);
    --dark-surface-alt: #0d141d;
    --dark-surface-hover: #18202c;
    --dark-surface-strong: #1f2937;
    --dark-surface-strong-hover: #334155;
    --dark-surface-strong-glass: rgba(15, 23, 42, 0.72);
    --dark-surface-dim: rgba(148, 163, 184, 0.08);
    --dark-border-soft: rgba(148, 163, 184, 0.12);
    --dark-border-color: rgba(148, 163, 184, 0.18);
    --dark-border-contrast: rgba(148, 163, 184, 0.3);
    --dark-noise-opacity: 0.02;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    color-scheme: light dark;
}

body {
    --bg-color: var(--light-bg-color);
    --text-color: var(--light-text-color);
    --text-muted: var(--light-text-muted);
    --text-soft: var(--light-text-soft);
    --text-subtle: var(--light-text-subtle);
    --surface-solid: var(--light-surface-solid);
    --surface-color: var(--light-surface-color);
    --surface-alt: var(--light-surface-alt);
    --surface-hover: var(--light-surface-hover);
    --surface-strong: var(--light-surface-strong);
    --surface-strong-hover: var(--light-surface-strong-hover);
    --surface-strong-glass: var(--light-surface-strong-glass);
    --surface-dim: var(--light-surface-dim);
    --button-hover-text-color: #ffffff;
    --service-card-hover-background: rgba(255, 255, 255, 0.95);
    --service-card-hover-border-color: rgba(0, 0, 0, 0.1);
    --border-soft: var(--light-border-soft);
    --border-color: var(--light-border-color);
    --border-contrast: var(--light-border-contrast);
    --noise-opacity: var(--light-noise-opacity);
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body[class~="bg-white"] {
    background-color: var(--bg-color) !important;
}

body[class~="bg-gray-50"] {
    background-color: var(--surface-alt) !important;
}

body[class~="text-gray-900"] {
    color: var(--text-color) !important;
}

body.light-theme {
    color-scheme: light;
}

body.dark-theme {
    --brand-ink: var(--dark-brand-ink);
    --brand-graphite: var(--dark-brand-graphite);
    --brand-steel: var(--dark-brand-steel);
    --brand-silver: var(--dark-brand-silver);
    --brand-ivory: var(--dark-brand-ivory);
    --brand-cloud: var(--dark-brand-cloud);
    --brand-line: var(--dark-brand-line);
    --brand-ring: var(--dark-brand-ring);
    --brand-glow: var(--dark-brand-glow);
    --brand-glow-strong: var(--dark-brand-glow-strong);
    --brand-gradient: var(--dark-brand-gradient);
    --brand-gradient-strong: var(--dark-brand-gradient-strong);
    --brand-gradient-soft: var(--dark-brand-gradient-soft);
    --bg-color: var(--dark-bg-color);
    --text-color: var(--dark-text-color);
    --text-muted: var(--dark-text-muted);
    --text-soft: var(--dark-text-soft);
    --text-subtle: var(--dark-text-subtle);
    --surface-solid: var(--dark-surface-solid);
    --surface-color: var(--dark-surface-color);
    --surface-alt: var(--dark-surface-alt);
    --surface-hover: var(--dark-surface-hover);
    --surface-strong: var(--dark-surface-strong);
    --surface-strong-hover: var(--dark-surface-strong-hover);
    --surface-strong-glass: var(--dark-surface-strong-glass);
    --surface-dim: var(--dark-surface-dim);
    --button-hover-text-color: #091018;
    --service-card-hover-background: rgba(17, 24, 33, 0.96);
    --service-card-hover-border-color: var(--dark-border-color);
    --border-soft: var(--dark-border-soft);
    --border-color: var(--dark-border-color);
    --border-contrast: var(--dark-border-contrast);
    --noise-opacity: var(--dark-noise-opacity);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    body:not(.light-theme) {
        --brand-ink: var(--dark-brand-ink);
        --brand-graphite: var(--dark-brand-graphite);
        --brand-steel: var(--dark-brand-steel);
        --brand-silver: var(--dark-brand-silver);
        --brand-ivory: var(--dark-brand-ivory);
        --brand-cloud: var(--dark-brand-cloud);
        --brand-line: var(--dark-brand-line);
        --brand-ring: var(--dark-brand-ring);
        --brand-glow: var(--dark-brand-glow);
        --brand-glow-strong: var(--dark-brand-glow-strong);
        --brand-gradient: var(--dark-brand-gradient);
        --brand-gradient-strong: var(--dark-brand-gradient-strong);
        --brand-gradient-soft: var(--dark-brand-gradient-soft);
        --bg-color: var(--dark-bg-color);
        --text-color: var(--dark-text-color);
        --text-muted: var(--dark-text-muted);
        --text-soft: var(--dark-text-soft);
        --text-subtle: var(--dark-text-subtle);
        --surface-solid: var(--dark-surface-solid);
        --surface-color: var(--dark-surface-color);
        --surface-alt: var(--dark-surface-alt);
        --surface-hover: var(--dark-surface-hover);
        --surface-strong: var(--dark-surface-strong);
        --surface-strong-hover: var(--dark-surface-strong-hover);
        --surface-strong-glass: var(--dark-surface-strong-glass);
        --surface-dim: var(--dark-surface-dim);
        --button-hover-text-color: #091018;
        --service-card-hover-background: rgba(17, 24, 33, 0.96);
        --service-card-hover-border-color: var(--dark-border-color);
        --border-soft: var(--dark-border-soft);
        --border-color: var(--dark-border-color);
        --border-contrast: var(--dark-border-contrast);
        --noise-opacity: var(--dark-noise-opacity);
        color-scheme: dark;
    }
}

.font-display {
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

body .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-solid);
    color: var(--text-color);
    line-height: 1;
    box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.55);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

body .theme-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--border-contrast);
    transform: translateY(-1px);
}

body .theme-toggle:focus-visible {
    outline: 2px solid var(--brand-graphite);
    outline-offset: 3px;
}

body .theme-toggle-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body .theme-toggle-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

body .theme-toggle-mobile-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .theme-toggle-mobile {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

body .theme-toggle-label {
    display: none;
}

body .magnetic-btn:hover {
    color: var(--button-hover-text-color) !important;
}

body .magnetic-btn:active {
    transform: scale(0.97) !important;
    transition-duration: 0.1s !important;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--text-color);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-contrast);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transition: all 0.15s ease;
}

.cursor-outline.hover {
    transform: scale(1.5);
    border-color: var(--text-soft);
    background: var(--surface-dim);
}

.wordmark-primary {
    color: var(--text-color);
}

.wordmark-secondary {
    color: var(--text-soft);
}

body .noise-overlay {
    opacity: var(--noise-opacity);
}

body .gradient-mesh {
    background:
        radial-gradient(at 18% 18%, var(--brand-ring) 0px, transparent 42%),
        radial-gradient(at 82% 12%, var(--brand-glow) 0px, transparent 46%),
        radial-gradient(at 26% 82%, rgba(123, 123, 123, 0.1) 0px, transparent 40%),
        radial-gradient(at 88% 78%, rgba(148, 163, 184, 0.1) 0px, transparent 42%),
        linear-gradient(180deg, var(--surface-solid) 0%, var(--brand-cloud) 100%);
}

body .glass-card,
body .service-card,
body .hero-snapshot {
    background: var(--surface-color);
    border-color: var(--border-soft);
}

body .service-card:hover {
    background: var(--service-card-hover-background);
    border-color: var(--service-card-hover-border-color);
}

body .blog-card,
body .contact-card,
body .faq-item,
body .team-card,
body .value-card,
body .hero-pillar,
body .hero-metric,
body .step-card,
body .automation-card,
body .cost-card,
body .pricing-card,
body .tech-item,
body .interactive-grid > *,
body .captcha-shell,
body .form-input {
    background: var(--surface-solid);
    border-color: var(--border-soft);
}

body .pricing-card.featured {
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.12) 0%, var(--surface-solid) 100%);
    border-color: var(--border-contrast);
}

body .hero-snapshot::before {
    background:
        radial-gradient(circle at top right, var(--brand-glow), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 100%);
}

body .hero-note {
    background: var(--surface-dim);
    color: var(--text-muted);
}

body .mobile-menu {
    background: var(--surface-solid);
}

body .section-label,
body .blog-tag,
body .time-saved,
body .form-status,
body .faq-answer-content,
body .prose blockquote,
body .cost-table th,
body .cost-table td,
body .form-input::placeholder {
    color: var(--text-soft);
}

body .form-label,
body .faq-question,
body .prose h2,
body .prose h3,
body .prose strong,
body .cost-table td:last-child {
    color: var(--text-color);
}

body .prose p,
body .prose li {
    color: var(--text-muted);
}

body .prose a {
    color: var(--brand-ink);
}

body .prose a:hover {
    color: var(--brand-graphite);
}

body .prose blockquote {
    border-left-color: var(--brand-graphite);
}

body .cost-table th,
body .cost-table td {
    border-bottom-color: var(--border-soft);
}

body .faq-question:hover,
body .faq-question:focus-visible,
body .form-input:hover {
    background: var(--surface-alt);
    border-color: var(--border-color);
}

body .form-input:focus {
    background: var(--surface-solid);
}

body .service-card-number,
body .service-number {
    -webkit-text-stroke-color: var(--border-contrast);
}

body .service-card:hover .service-card-number {
    -webkit-text-stroke-color: var(--brand-steel);
}

body .timeline-item::after,
body .process-step::after {
    background: linear-gradient(90deg, var(--border-color) 0%, transparent 100%);
}

body .interactive-grid {
    background: var(--border-soft);
}

body .dot-pattern {
    background-image: radial-gradient(var(--border-contrast) 1px, transparent 1px);
}

body .hover-lift:hover,
body .contact-card:hover,
body .pricing-card:hover {
    box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.42);
}

body [class~="bg-white"] {
    background-color: var(--surface-solid) !important;
}

body [class*="bg-white/"] {
    background-color: var(--surface-color) !important;
}

body [class~="bg-gray-50"] {
    background-color: var(--surface-alt) !important;
}

body [class~="bg-gray-100"] {
    background-color: var(--surface-hover) !important;
}

body [class~="bg-gray-800"] {
    background-color: var(--surface-strong-hover) !important;
}

body [class*="bg-gray-800/"] {
    background-color: var(--surface-strong-glass) !important;
}

body [class~="bg-gray-900"] {
    background-color: var(--surface-strong) !important;
}

body [class~="text-gray-900"] {
    color: var(--text-color) !important;
}

body [class~="text-gray-700"],
body [class~="text-gray-600"] {
    color: var(--text-muted) !important;
}

body [class~="text-gray-500"],
body [class~="text-gray-400"],
body [class~="text-gray-300"] {
    color: var(--text-soft) !important;
}

body [class~="border-gray-100"] {
    border-color: var(--border-soft) !important;
}

body [class~="border-gray-200"] {
    border-color: var(--border-color) !important;
}

body [class~="border-gray-300"] {
    border-color: var(--border-contrast) !important;
}

body [class*="hover:bg-gray-100"]:hover {
    background-color: var(--surface-hover) !important;
}

body [class*="hover:bg-gray-800"]:hover {
    background-color: var(--surface-strong-hover) !important;
}

body [class*="hover:bg-gray-50"]:hover {
    background-color: var(--surface-alt) !important;
}

body [class*="hover:text-gray-900"]:hover {
    color: var(--text-color) !important;
}

body [class*="hover:text-gray-600"]:hover {
    color: var(--text-muted) !important;
}

body [class*="hover:border-gray-400"]:hover {
    border-color: var(--border-contrast) !important;
}

.animation-delay-050 {
    animation-delay: 0.05s;
}

.animation-delay-100 {
    animation-delay: 0.1s;
}

.animation-delay-150 {
    animation-delay: 0.15s;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

.margin-top-0 {
    margin-top: 0;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

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

@media (max-width: 767px) {
    body .theme-toggle-desktop {
        display: none;
    }
}

@media (min-width: 768px) {
    body .theme-toggle-mobile-group {
        display: none;
    }
}