/* Light / dark theme — Future Craft */

:root,
[data-theme="light"] {
  color-scheme: light;
  --fc-bg: #ffffff;
  --fc-bg-muted: #f8fafc;
  --fc-bg-subtle: #f1f5f9;
  --fc-surface: #ffffff;
  --fc-surface-raised: #ffffff;
  --fc-border: #e2e8f0;
  --fc-border-soft: #f1f5f9;
  --fc-text: #0f172a;
  --fc-text-secondary: #334155;
  --fc-text-muted: #64748b;
  --fc-text-faint: #94a3b8;
  --fc-header-bg: rgba(255, 255, 255, 0.9);
  --fc-input-bg: #ffffff;
  --fc-shadow: rgba(15, 23, 42, 0.08);
  --fc-accent: #4f46e5;
  --fc-accent-soft: #eef2ff;
  --fc-accent-border: #c7d2fe;
  --fc-hero-line: #0f172a;
  --fc-card-hover-border: #c7d2fe;
}

[data-theme="dark"] {
  color-scheme: dark;
  --fc-bg: #0b1020;
  --fc-bg-muted: #0f172a;
  --fc-bg-subtle: #111827;
  --fc-surface: #151d2f;
  --fc-surface-raised: #1a2332;
  --fc-border: rgba(148, 163, 184, 0.16);
  --fc-border-soft: rgba(148, 163, 184, 0.1);
  --fc-text: #f1f5f9;
  --fc-text-secondary: #cbd5e1;
  --fc-text-muted: #94a3b8;
  --fc-text-faint: #64748b;
  --fc-header-bg: rgba(11, 16, 32, 0.92);
  --fc-input-bg: #111827;
  --fc-shadow: rgba(0, 0, 0, 0.35);
  --fc-accent: #818cf8;
  --fc-accent-soft: rgba(99, 102, 241, 0.14);
  --fc-accent-border: rgba(129, 140, 248, 0.35);
  --fc-hero-line: #f8fafc;
  --fc-card-hover-border: rgba(129, 140, 248, 0.45);
}

body {
  background: var(--fc-bg);
  color: var(--fc-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--fc-border);
  border-radius: 0.625rem;
  background: var(--fc-surface);
  color: var(--fc-text-secondary);
  cursor: pointer;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transform: scale(1);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.theme-toggle:hover {
  border-color: var(--fc-accent-border);
  color: var(--fc-accent);
  background: var(--fc-accent-soft);
}

.theme-toggle:active {
  transform: scale(0.9);
  box-shadow: inset 0 2px 6px var(--fc-shadow);
  transition-duration: 0.08s;
}

.theme-toggle svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transform: scale(1) rotate(0deg);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.theme-toggle:active svg {
  transform: scale(0.82) rotate(-14deg);
  transition-duration: 0.1s;
}

[data-theme="light"] .theme-toggle-icon--sun,
[data-theme="dark"] .theme-toggle-icon--moon {
  display: none !important;
}

[data-theme="light"] .theme-toggle-icon--moon,
[data-theme="dark"] .theme-toggle-icon--sun {
  display: block;
}

.nav-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-header-actions {
  display: none;
}

@media (max-width: 767px) {
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    height: 2.5rem;
  }

  .mobile-header-actions .theme-toggle,
  .mobile-header-actions .mobile-menu-btn {
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    flex: 0 0 2.5rem;
    margin: 0;
    padding: 0;
    line-height: 0;
    -webkit-appearance: none;
    appearance: none;
    align-self: center;
  }

  .mobile-header-actions .theme-toggle {
    position: relative;
  }

  .mobile-header-actions .theme-toggle .theme-toggle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  .mobile-header-actions .theme-toggle:active .theme-toggle-icon {
    transform: translate(-50%, -50%) scale(0.82) rotate(-14deg);
    transition-duration: 0.1s;
  }

  .mobile-header-actions .mobile-menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    padding: 0.5rem;
  }
}

.mobile-header-theme-toggle {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle svg,
  .mobile-header-actions .theme-toggle .theme-toggle-icon {
    transition: none !important;
  }

  .theme-toggle:active,
  .theme-toggle:active svg,
  .mobile-header-actions .theme-toggle:active .theme-toggle-icon {
    transform: none;
  }

  .mobile-header-actions .theme-toggle:active .theme-toggle-icon {
    transform: translate(-50%, -50%);
  }
}

/* Utility overrides */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-white\/90 {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .bg-slate-50 {
  background: var(--fc-bg-muted) !important;
}

[data-theme="dark"] .bg-slate-100 {
  background: var(--fc-bg-subtle) !important;
}

[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-700 {
  color: var(--fc-text) !important;
}

[data-theme="dark"] .text-slate-600 {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .text-slate-500 {
  color: var(--fc-text-muted) !important;
}

[data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .text-indigo-800 {
  color: var(--fc-accent) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200 {
  border-color: var(--fc-border) !important;
}

[data-theme="dark"] .hover\:text-indigo-600:hover {
  color: var(--fc-accent) !important;
}

[data-theme="dark"] .hover\:bg-slate-50:hover {
  background: var(--fc-bg-subtle) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--fc-input-bg);
  border-color: var(--fc-border);
  color: var(--fc-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--fc-text-faint);
}

/* Header & mobile menu */
[data-theme="dark"] .site-header {
  background: var(--fc-header-bg) !important;
  border-bottom-color: var(--fc-border) !important;
}

[data-theme="dark"] .mobile-menu-btn {
  background: var(--fc-surface);
  border-color: var(--fc-border);
  color: var(--fc-text-secondary);
}

[data-theme="dark"] .mobile-menu-btn:hover {
  background: var(--fc-accent-soft);
  border-color: var(--fc-accent-border);
}

[data-theme="dark"] .mobile-menu-btn.is-open {
  background: var(--fc-accent-soft);
  border-color: var(--fc-accent-border);
  color: var(--fc-accent);
}

[data-theme="dark"] .mobile-menu {
  background: rgba(15, 23, 42, 0.98);
  border-bottom-color: var(--fc-border);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mobile-menu-link {
  color: var(--fc-text);
}

[data-theme="dark"] .mobile-menu-link:hover,
[data-theme="dark"] .mobile-menu-link:focus-visible {
  background: var(--fc-accent-soft);
  color: var(--fc-accent);
}

[data-theme="dark"] .mobile-lang-btn {
  background: var(--fc-surface);
  border-color: var(--fc-border);
  color: var(--fc-text-muted);
}

[data-theme="dark"] .mobile-lang-btn.is-active {
  background: var(--fc-accent);
  border-color: var(--fc-accent);
  color: #fff;
}

/* Hero */
[data-theme="dark"] .hero-section {
  background:
    radial-gradient(at 12% 18%, rgba(99, 102, 241, 0.18) 0, transparent 42%),
    radial-gradient(at 88% 12%, rgba(139, 92, 246, 0.16) 0, transparent 40%),
    radial-gradient(at 72% 88%, rgba(6, 182, 212, 0.12) 0, transparent 45%),
    radial-gradient(at 20% 82%, rgba(168, 85, 247, 0.1) 0, transparent 42%),
    linear-gradient(180deg, #0b1020 0%, #0f172a 55%, #0b1020 100%);
}

[data-theme="dark"] .hero-badge {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12));
  border-color: var(--fc-accent-border);
  color: #c7d2fe;
}

[data-theme="dark"] .hero-tagline {
  color: #a5b4fc;
}

[data-theme="dark"] .hero-title-line {
  color: var(--fc-hero-line);
}

[data-theme="dark"] .hero-subtitle {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .hero-btn--secondary {
  color: #e0e7ff;
  background: var(--fc-surface);
  border-color: var(--fc-accent-border);
}

[data-theme="dark"] .hero-btn--secondary:hover {
  background: var(--fc-accent-soft);
}

[data-theme="dark"] .hero-btn--blog {
  color: #e0e7ff;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.1));
  border-color: var(--fc-accent-border);
}

[data-theme="dark"] .hero-pill {
  background: var(--fc-surface);
  border-color: var(--fc-border);
  color: var(--fc-text-secondary);
}

[data-theme="dark"] .hero-pill-icon {
  background: var(--fc-accent-soft);
  color: var(--fc-accent);
}

[data-theme="dark"] .hero-stat-label {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .hero-browser {
  background: var(--fc-surface-raised);
  border-color: var(--fc-border);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .hero-browser-bar {
  background: #1e293b;
  border-bottom-color: var(--fc-border);
}

[data-theme="dark"] .hero-browser-url {
  background: #0f172a;
  color: var(--fc-text-muted);
}

[data-theme="dark"] .hero-browser-body {
  background: #111827;
}

[data-theme="dark"] .hero-browser-nav span {
  background: #334155;
}

[data-theme="dark"] .hero-browser-nav span:nth-child(1) {
  background: rgba(129, 140, 248, 0.45);
}

[data-theme="dark"] .hero-browser-hero-block {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
}

[data-theme="dark"] .hero-browser-line {
  background: #334155;
}

[data-theme="dark"] .hero-browser-cards span {
  background: #1e293b;
  border-color: var(--fc-border);
}

[data-theme="dark"] .hero-device-bezel {
  background: linear-gradient(180deg, #0b1220, #020617);
}

[data-theme="dark"] .hero-device-screen--desktop {
  background: linear-gradient(160deg, #1e1b4b, #0f172a 55%, #312e81);
}

[data-theme="dark"] .hero-desktop-sidebar,
[data-theme="dark"] .hero-desktop-main {
  background: rgba(15, 23, 42, 0.88);
  border-color: var(--fc-border);
}

[data-theme="dark"] .hero-desktop-rows span,
[data-theme="dark"] .hero-phone-status span {
  background: #334155;
}

[data-theme="dark"] .hero-phone {
  background: linear-gradient(180deg, #020617, #111827);
  border-color: rgba(148, 163, 184, 0.25);
}

[data-theme="dark"] .hero-phone-screen {
  background: linear-gradient(165deg, #1e1b4b, #0f172a 50%, #312e81);
}

[data-theme="dark"] .hero-phone-cards span {
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--fc-border);
}

[data-theme="dark"] .hero-device-tag {
  background: rgba(15, 23, 42, 0.92);
  border-color: var(--fc-accent-border);
  color: #c7d2fe;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .hero-device-tag--mobile {
  color: #ddd6fe;
}

[data-theme="dark"] .hero-device-tag--desktop {
  color: #bae6fd;
}

[data-theme="dark"] .hero-float-card {
  background: var(--fc-surface-raised);
  border-color: var(--fc-border);
  color: var(--fc-text);
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .hero-float-icon {
  background: var(--fc-accent-soft);
  color: var(--fc-accent);
}

[data-theme="dark"] .hero-visual-badge {
  background: var(--fc-surface);
  border-color: var(--fc-border);
  color: var(--fc-text-muted);
}

[data-theme="dark"] .hero-scroll-hint {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .hero-scroll-hint:hover {
  color: var(--fc-accent);
}

/* Sections */
[data-theme="dark"] .services-section {
  background: var(--fc-bg);
}

[data-theme="dark"] .why-choose {
  background: var(--fc-bg-muted);
}

[data-theme="dark"] .why-choose-item {
  background: var(--fc-surface);
  border-color: var(--fc-border);
}

[data-theme="dark"] .why-choose-item:hover {
  border-color: var(--fc-card-hover-border);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.12);
}

[data-theme="dark"] .why-choose-icon {
  background: var(--fc-accent-soft);
  color: var(--fc-accent);
}

[data-theme="dark"] .why-choose-text {
  color: var(--fc-text-secondary);
}

[data-theme="dark"] .work-process {
  background: linear-gradient(180deg, var(--fc-bg) 0%, var(--fc-bg-muted) 100%);
}

[data-theme="dark"] .work-process-card {
  background: var(--fc-surface);
  border-color: var(--fc-border);
}

[data-theme="dark"] .work-process-card:hover {
  border-color: var(--fc-card-hover-border);
  box-shadow: 0 14px 28px -14px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .work-process-card-title {
  color: var(--fc-text);
}

[data-theme="dark"] .work-process-card-desc {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .about-section {
  background: linear-gradient(180deg, var(--fc-bg) 0%, var(--fc-bg-muted) 100%);
}

[data-theme="dark"] .about-text {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .consultation-picker--about .consultation-picker-toggle {
  box-shadow:
    0 12px 28px -10px rgba(99, 102, 241, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .consultation-picker--about .consultation-picker-toggle:hover {
  box-shadow:
    0 16px 34px -10px rgba(99, 102, 241, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .consultation-picker--menu {
  border-top-color: var(--fc-border);
}

[data-theme="dark"] .consultation-picker-hint {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .consultation-wa--iraq {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(129, 140, 248, 0.35);
  color: #c7d2fe;
}

[data-theme="dark"] .consultation-wa--syria {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(192, 132, 252, 0.35);
  color: #e9d5ff;
}

[data-theme="dark"] .service-card {
  background: var(--fc-surface);
  border-color: var(--fc-border);
}

[data-theme="dark"] .service-card:hover {
  border-color: var(--fc-card-hover-border);
  box-shadow: 0 14px 28px -14px rgba(99, 102, 241, 0.22);
}

[data-theme="dark"] .service-card-title {
  color: var(--fc-text);
}

[data-theme="dark"] .service-card-desc {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .service-card-icon {
  background: var(--fc-accent-soft);
  color: var(--fc-accent);
}

[data-theme="dark"] .service-card--v2 .service-card-icon { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; }
[data-theme="dark"] .service-card--v3 .service-card-icon { background: rgba(8, 145, 178, 0.15); color: #67e8f9; }
[data-theme="dark"] .service-card--v4 .service-card-icon { background: rgba(5, 150, 105, 0.15); color: #6ee7b7; }
[data-theme="dark"] .service-card--v5 .service-card-icon { background: rgba(234, 88, 12, 0.15); color: #fdba74; }
[data-theme="dark"] .service-card--v6 .service-card-icon { background: rgba(219, 39, 119, 0.15); color: #f9a8d4; }

/* Contact */
[data-theme="dark"] .contact-phone-box--indigo {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(129, 140, 248, 0.25);
}

[data-theme="dark"] .contact-phone-box--purple {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(167, 139, 250, 0.25);
}

[data-theme="dark"] .contact-link-card {
  background: var(--fc-surface);
  border-color: var(--fc-border);
}

[data-theme="dark"] .contact-link-card:hover {
  border-color: var(--fc-card-hover-border);
}

[data-theme="dark"] .contact-link-card-value {
  color: var(--fc-text);
}

[data-theme="dark"] .contact-link-card-label {
  color: var(--fc-text-muted);
}

[data-theme="dark"] #contact-form {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border) !important;
}

/* Blog & portfolio */
[data-theme="dark"] .blog-card {
  background: var(--fc-surface);
  border-color: var(--fc-border);
  box-shadow: 0 10px 30px -24px var(--fc-shadow);
}

[data-theme="dark"] .blog-card-title a {
  color: var(--fc-text);
}

[data-theme="dark"] .blog-card-title a:hover,
[data-theme="dark"] .blog-card-link {
  color: var(--fc-accent);
}

[data-theme="dark"] .blog-card-link:hover {
  color: #a5b4fc;
}

[data-theme="dark"] .blog-faq-item {
  background: linear-gradient(180deg, var(--fc-surface) 0%, var(--fc-bg-muted) 100%);
  border-color: var(--fc-border);
}

[data-theme="dark"] .blog-faq-question {
  color: #c7d2fe;
}

[data-theme="dark"] .blog-faq-answer,
[data-theme="dark"] .blog-post-content {
  color: var(--fc-text-secondary);
}

[data-theme="dark"] .blog-post-back,
[data-theme="dark"] .portfolio-project-back {
  color: var(--fc-accent);
}

[data-theme="dark"] .blog-post-title,
[data-theme="dark"] .portfolio-project-title {
  color: var(--fc-text);
}

[data-theme="dark"] .portfolio-project-block {
  background: var(--fc-surface);
  border-color: var(--fc-border);
}

[data-theme="dark"] .portfolio-project-text,
[data-theme="dark"] .portfolio-card-desc {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .portfolio-tech-tag {
  background: var(--fc-accent-soft);
  color: #c7d2fe;
  border-color: var(--fc-accent-border);
}

[data-theme="dark"] .portfolio-detail-section--technologies {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--fc-border);
}

[data-theme="dark"] .portfolio-section {
  background: linear-gradient(180deg, var(--fc-bg) 0%, var(--fc-bg-muted) 100%);
}

[data-theme="dark"] .portfolio-section-title {
  color: var(--fc-text);
}

[data-theme="dark"] .portfolio-section-subtitle,
[data-theme="dark"] .portfolio-empty {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .portfolio-card {
  background: var(--fc-surface);
  border-color: var(--fc-border);
  box-shadow: 0 10px 30px -24px var(--fc-shadow);
}

[data-theme="dark"] .portfolio-card-title a {
  color: var(--fc-text);
}

[data-theme="dark"] .portfolio-card-title a:hover,
[data-theme="dark"] .portfolio-card-link {
  color: var(--fc-accent);
}

[data-theme="dark"] .portfolio-card-link:hover {
  color: #a5b4fc;
}

[data-theme="dark"] .portfolio-card-category {
  color: var(--fc-accent);
}

[data-theme="dark"] .portfolio-modal-dialog {
  background: #1e293b;
}

[data-theme="dark"] .portfolio-modal-title {
  color: #f1f5f9;
}

[data-theme="dark"] .portfolio-modal-close {
  background: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .portfolio-detail-text {
  color: #cbd5e1;
}

[data-theme="dark"] .portfolio-showcase-main {
  background: #0f172a;
}

[data-theme="dark"] .portfolio-detail-section--results {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(147, 51, 234, 0.12));
}

[data-theme="dark"] .portfolio-gallery-main {
  background: var(--fc-bg-subtle);
}

[data-theme="dark"] .portfolio-gallery-thumb {
  background: var(--fc-bg-muted);
}

[data-theme="dark"] .portfolio-gallery-thumb.is-active {
  border-color: var(--fc-accent);
}

[data-theme="dark"] article.rounded-2xl.border {
  background: var(--fc-surface);
  border-color: var(--fc-border) !important;
}

[data-theme="dark"] article.rounded-2xl.border h2 a {
  color: var(--fc-text);
}

[data-theme="dark"] article.rounded-2xl.border h2 a:hover {
  color: var(--fc-accent);
}

/* Language switcher (desktop) */
[data-theme="dark"] .nav-lang-switch {
  border-color: var(--fc-border);
}

[data-theme="dark"] .nav-lang-switch a:not(.bg-indigo-600) {
  color: var(--fc-text-muted);
}

[data-theme="dark"] .nav-lang-switch a:not(.bg-indigo-600):hover {
  background: var(--fc-bg-subtle);
  color: var(--fc-text);
}

[data-theme="dark"] .floating-contact-label {
  background: var(--fc-surface);
  border-color: rgba(34, 197, 94, 0.35);
  color: #4ade80;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}