[data-theme="dark"] {
  --surface:   #0A1322;
  --surface-2: #0E1A2E;
  --surface-3: #16243B;
  --card:      #111E33;
  --ink:       #EAF0F8;
  --ink-2:     rgba(234,240,248,.66);
  --ink-3:     rgba(234,240,248,.42);
  --hairline:  rgba(255,255,255,.09);
  --hairline-2: rgba(255,255,255,.17);
}

body, .nav, .card, .prob-card, .faq-item, .sol-col, .about-role,
.dash, .kpi, .dash-chart, .trust-cat, .trust-badge, .contact-card, .pt-tab {
  transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}

[data-theme="dark"] .nav { background: rgba(10,19,34,.72); }
[data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active,
[data-theme="dark"] .nav-login:hover, [data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .mega { background: rgba(14,26,46,.985); }
[data-theme="dark"] .drawer { background: var(--surface-2); }

[data-theme="dark"] .btn-primary { background: var(--ink); color: #0B1220; }
[data-theme="dark"] .btn-primary:hover { background: #ffffff; }

[data-theme="dark"] .hero-bg .grid {
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

[data-theme="dark"] .eyebrow {
  background: color-mix(in srgb, var(--brand-primary) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent) !important;
  color: color-mix(in srgb, var(--brand-primary) 60%, #fff) !important;
}
[data-theme="dark"] .svc-ico, [data-theme="dark"] .sol-ico,
[data-theme="dark"] .mega-ico, [data-theme="dark"] .ar-ico {
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
  color: color-mix(in srgb, var(--brand-primary) 66%, #fff) !important;
}
[data-theme="dark"] .case-tag {
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  color: color-mix(in srgb, var(--brand-primary) 66%, #fff);
}
[data-theme="dark"] .sol-tab.on { background: var(--brand-primary); color: #fff; }
[data-theme="dark"] .prob-ico { color: color-mix(in srgb, var(--brand-primary) 70%, #fff); }
[data-theme="dark"] .cs-meta span { background: var(--surface-3); }
[data-theme="dark"] .tag { background: var(--surface-3); }

[data-theme="dark"] .foot { background: #05090F; }

.theme-toggle {
  width: 46px; height: 26px; border-radius: 100px; flex: none;
  background: var(--surface-3); border: 1px solid var(--hairline-2);
  cursor: pointer; position: relative; transition: background .25s;
}
.theme-toggle::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .28s var(--ease-out);
  display: grid; place-items: center;
}
[data-theme="dark"] .theme-toggle::after { transform: translateX(-20px); }
.theme-toggle i { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-3); transition: opacity .2s; pointer-events: none; }
.theme-toggle .ti-sun  { right: 6px; }
.theme-toggle .ti-moon { left: 6px; }
[data-theme="dark"] .theme-toggle .ti-sun { opacity: .35; }
[data-theme="light"] .theme-toggle .ti-moon, :root:not([data-theme="dark"]) .theme-toggle .ti-moon { opacity: .35; }

#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  opacity: 1; transition: opacity .45s var(--ease-out);
}
#page-loader.hide { opacity: 0; pointer-events: none; }
.pl-logomark {
  width: 66px; height: 66px;
  animation: plPulse 1.4s var(--ease-out) infinite;
}
@keyframes plPulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.07); } }
.pl-brand { animation: plPulse 1.4s var(--ease-out) infinite; }
.pl-brand-img { height: 58px; }
.pl-word { font-family: var(--font-fa); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.pl-bar { width: 180px; height: 3px; border-radius: 100px; background: var(--surface-3); overflow: hidden; }
.pl-bar::after { content:""; display: block; height: 100%; width: 40%; border-radius: 100px; background: var(--brand-gradient-h); animation: plBar 1.1s var(--ease-in-out) infinite; }
@keyframes plBar { 0%{ transform: translateX(150%); } 100%{ transform: translateX(-260%); } }
@media (prefers-reduced-motion: reduce){ .pl-logomark, .pl-bar::after { animation: none; } }

.skel { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 10px; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 8%, transparent), transparent);
  transform: translateX(-100%); animation: skelShimmer 1.4s infinite;
}
[dir="rtl"] .skel::after { animation-name: skelShimmerRtl; }
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
@keyframes skelShimmerRtl { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .skel::after { animation: none; } }

.sk-page { max-width: 1240px; margin: 0 auto; padding: 110px 32px 0; }
.sk-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.sk-col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sk-line { height: 16px; width: 100%; }
.sk-line.lg { height: 40px; }
.sk-line.w70 { width: 70%; } .sk-line.w50 { width: 50%; } .sk-line.w40 { width: 40%; } .sk-line.w85 { width: 85%; }
.sk-pill { height: 26px; width: 150px; border-radius: 100px; }
.sk-btn { height: 46px; width: 170px; border-radius: 10px; }
.sk-row { display: flex; gap: 12px; }
.sk-block { height: 320px; width: 100%; border-radius: 18px; }
.sk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 72px; }
.sk-card { height: 180px; border-radius: 18px; }
@media (max-width: 980px){ .sk-hero { grid-template-columns: 1fr; } .sk-cards { grid-template-columns: 1fr; } }