/* Creative PS - Legacy Site -> Design System v2 compatibility layer
   Keeps the original site's content, routes and JS behavior while applying
   the visual language from the redesigned website. */

:root {
  /* Map the old token names to the new 2026 design system. */
  --primary: var(--c-primary);
  --primary-light: var(--c-primary-light);
  --primary-dark: var(--c-primary-dark);
  --primary-glow: rgba(80, 43, 120, .18);
  --secondary: var(--c-accent);
  --secondary-light: var(--c-accent-light);
  --secondary-dark: var(--c-primary-dark);
  --accent: var(--c-accent);
  --accent-light: var(--c-accent-light);
  --success: var(--c-success);
  --warning: var(--c-warning);
  --danger: var(--c-danger);
  --info: var(--c-info);
  --light: var(--c-bg);
  --light-dark: var(--c-surface);
  --gray: var(--c-muted);
  --gray-light: var(--c-slate);
  --gray-dark: var(--c-ink-soft);

  --day-primary: var(--c-primary);
  --day-primary-light: var(--c-primary-light);
  --day-secondary: var(--c-accent);
  --day-secondary-light: var(--c-accent-light);
  --day-accent: var(--c-accent);
  --day-accent-light: var(--c-accent-light);
  --day-bg: var(--c-bg);
  --day-bg-secondary: var(--c-surface);
  --day-bg-card: var(--c-white);
  --day-bg-hover: var(--c-surface);
  --day-text: var(--c-ink);
  --day-text-secondary: var(--c-muted);
  --day-text-muted: var(--c-slate);
  --day-border: var(--c-border);

  --gradient-primary: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  --gradient-primary-reverse: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
  --gradient-secondary: linear-gradient(135deg, var(--c-accent), var(--c-primary-light));
  --gradient-accent: linear-gradient(135deg, var(--c-accent), var(--c-accent-light));
  --day-gradient-primary: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  --day-gradient-secondary: linear-gradient(135deg, var(--c-accent), var(--c-primary-light));
  --day-gradient-accent: linear-gradient(135deg, var(--c-accent), var(--c-accent-light));
  --day-gradient-card: linear-gradient(180deg, #fff, var(--c-surface));
  --day-gradient-hero: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --day-shadow-sm: var(--shadow-sm);
  --day-shadow-md: var(--shadow-md);
  --day-shadow-lg: var(--shadow-lg);
  --day-shadow-xl: var(--shadow-xl);
  --day-shadow-2xl: var(--shadow-xl);
  --section-py: 64px;
  --section-py-md: 56px;
  --section-py-sm: 44px;
  --section-header-mb: 32px;
  --grid-gap: 20px;
  --grid-mb: 32px;
  --card-gap: 24px;
  --block-mb: 36px;
}

html { background: var(--c-bg); }
body,
body.light-theme {
  background: var(--c-bg) !important;
  color: var(--c-ink) !important;
  font-family: var(--font-ar);
}
html[dir="ltr"] body,
body.en { font-family: var(--font-en); }

/* Remove the older visual noise; preserve all functional elements. */
.particles-bg { display: none !important; }
body::before,
body::after { box-shadow: none !important; }

/* Header ------------------------------------------------------------------ */
.header {
  height: var(--header-h) !important;
  min-height: var(--header-h);
  padding: 0 !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}
.header .container { width: 100%; }
.navbar {
  width: 100%;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 !important;
}
.logo { gap: 8px !important; }
.logo-icon.logo-icon--img {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
.logo-icon--img .logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.logo-text { color: var(--c-ink) !important; text-shadow: none !important; }
.logo-text span { color: var(--c-primary) !important; }
.nav-menu { gap: 4px !important; }
.nav-link,
.nav-menu > li > a:not(.nav-link) {
  color: var(--c-ink) !important;
  padding: 8px 10px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nav-link::before,
.nav-link::after,
.nav-menu > li > a:not(.nav-link)::before,
.nav-menu > li > a:not(.nav-link)::after { display: none !important; }
.nav-link:hover,
.nav-menu > li > a:not(.nav-link):hover,
.nav-link.active {
  color: var(--c-primary) !important;
  background: var(--c-accent-pale) !important;
}
.dropdown-content,
.dropdown-menu {
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 20px !important;
}
.dropdown-grid { gap: 20px !important; }
.dropdown-column h4 { color: var(--c-slate) !important; font-size: 12px !important; letter-spacing: .5px; }
.dropdown-item {
  color: var(--c-ink) !important;
  background: transparent !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transform: none !important;
}
.dropdown-item:hover { background: var(--c-surface) !important; color: var(--c-primary) !important; }
.dropdown-item i { color: var(--c-accent) !important; }
.dropdown-footer { border-color: var(--c-border) !important; }
.nav-actions { gap: 8px !important; }
.lang-toggle,
.theme-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--c-surface) !important;
  border: 0 !important;
  color: var(--c-ink) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
.lang-toggle img { width: 18px !important; height: 18px !important; }
.lang-toggle:hover,
.theme-toggle:hover { background: var(--c-accent-pale) !important; color: var(--c-primary) !important; transform: none !important; }
.request-service-btn { white-space: nowrap; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: none;
}
.btn::before,
.btn::after,
.btn-glow,
.link-glow { display: none !important; }
.btn-primary,
.btn-secondary {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-secondary:hover { background: var(--c-primary-dark) !important; border-color: var(--c-primary-dark) !important; transform: translateY(-1px) !important; }
.btn-outline {
  background: transparent !important;
  border: 1px solid currentColor !important;
  color: var(--c-primary) !important;
}
.btn-outline:hover { background: var(--c-accent-pale) !important; }
.hero .btn-outline,
.page-hero .btn-outline { color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
.hero .btn-outline:hover,
.page-hero .btn-outline:hover { background: rgba(255,255,255,.1) !important; }

/* Hero -------------------------------------------------------------------- */
.hero,
.page-hero {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.hero {
  min-height: auto !important;
  padding: 88px 0 68px !important;
}
.page-hero { min-height: auto !important; padding: 64px 0 !important; }
.hero::before,
.page-hero::before { background: var(--c-accent) !important; height: 4px !important; }
.hero-bg {
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  opacity: 1 !important;
}
.hero .parallax-layer,
.hero > .floating-elements { display: none !important; }
.hero > .container,
.page-hero > .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: center;
  gap: 48px;
}
.erp-page .hero > .container,
.hero > .container:has(.hero-content:only-child) { grid-template-columns: 1fr; }
.hero-content { max-width: 760px !important; }
.hero-badge,
.section-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 10px !important;
  border-radius: var(--radius-full) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.hero-badge {
  color: var(--c-accent-light) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.hero-title,
.page-hero .hero-title {
  color: #fff !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  margin-bottom: 16px !important;
}
.hero-title .title-line { color: #fff !important; }
.hero-description,
.page-hero .hero-description {
  color: rgba(255,255,255,.84) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  max-width: 680px;
}
.hero .gradient-text,
.page-hero .gradient-text,
.hero .highlight-text { color: #fff !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important; }
.hero .highlight { color: var(--c-accent-light) !important; background: none !important; padding: 0 !important; }
.hero-actions { gap: 12px !important; margin-top: 24px !important; }
.hero-stats {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  gap: 16px !important;
}
.hero .stat-card {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: none !important;
}
.hero .stat-icon { color: var(--c-accent-light) !important; background: transparent !important; box-shadow: none !important; }
.hero .stat-number { color: #fff !important; font-size: 28px !important; font-weight: 800 !important; }
.hero .stat-label { color: rgba(255,255,255,.68) !important; font-size: 13px !important; }
.hero-visual .visual-container,
.main-visual,
.dashboard-preview {
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden;
}
.dashboard-preview { background: rgba(255,255,255,.08) !important; backdrop-filter: blur(10px); }
.hero-visual img { border-radius: var(--radius-xl); }
.scroll-indicator { opacity: .55 !important; }

/* Sections ---------------------------------------------------------------- */
.about-section,
.services-section,
.projects-section,
.testimonials-section,
.blog-section,
.partners-section,
.contact-section,
.features-section,
.benefits-section,
.hardware-section,
.cameras-section,
.services,
.process,
.portfolio,
.about,
.section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  background-image: none !important;
}
.services-section,
.testimonials-section,
.partners-section,
.features-section,
.services,
.process { background: var(--c-surface) !important; }
.projects-section,
.blog-section,
.about-section,
.contact-section,
.portfolio,
.about { background: var(--c-bg) !important; }
.section-header { max-width: 760px; margin-bottom: 32px !important; }
.section-badge {
  color: var(--c-accent) !important;
  background: var(--c-accent-pale) !important;
  border: 0 !important;
}
.section-title {
  color: var(--c-ink) !important;
  font-size: clamp(1.8rem, 3vw, 2.25rem) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.section-subtitle { color: var(--c-muted) !important; font-size: 17px !important; }
.gradient-text:not(.hero .gradient-text):not(.page-hero .gradient-text) {
  color: var(--c-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  text-shadow: none !important;
}

/* Cards ------------------------------------------------------------------- */
.service-card,
.project-card,
.testimonial-card,
.case-card,
.feature,
.feature-item,
.benefit,
.faq-item,
.partner-logo,
.sidebar-widget,
.stat-card,
.hardware-item,
.camera,
.about-feature,
.process-step,
.card-3d {
  background: var(--c-white) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.service-card:hover,
.project-card:hover,
.testimonial-card:hover,
.case-card:hover,
.feature:hover,
.feature-item:hover,
.benefit:hover,
.faq-item:hover,
.partner-logo:hover,
.sidebar-widget:hover,
.hardware-item:hover,
.card-3d:hover {
  border-color: var(--c-accent-light) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
}
.service-card::before,
.service-card::after,
.project-card::before,
.project-card::after,
.testimonial-card::before,
.card-3d::before,
.card-3d::after,
.icon-glow { display: none !important; }
.service-icon,
.feature-icon,
.contact-icon,
.card-icon,
.stat-icon {
  background: var(--c-accent-pale) !important;
  color: var(--c-primary) !important;
  border-radius: var(--radius-md) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.service-title,
.project-title,
.case-title,
.contact-title,
.feature h3,
.benefit h3,
.faq-item h3 { color: var(--c-ink) !important; text-shadow: none !important; }
.service-description,
.project-description,
.about-description,
.contact-description,
.case-meta,
.faq-answer,
.feature p,
.benefit p { color: var(--c-muted) !important; }
.service-features li,
.benefits-list li,
.feature-list li,
.case-points li { color: var(--c-muted) !important; }
.service-features i,
.benefits-list i,
.feature-list i,
.case-points i { color: var(--c-accent) !important; }
.service-link,
.card-link,
.project-link { color: var(--c-primary) !important; }
.project-image,
.project-img { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.project-overlay { background: linear-gradient(180deg, transparent, rgba(15,15,20,.82)) !important; }
.filter-btn {
  border: 1px solid var(--c-border) !important;
  background: #fff !important;
  color: var(--c-muted) !important;
  box-shadow: none !important;
  border-radius: var(--radius-full) !important;
}
.filter-btn:hover,
.filter-btn.active { background: var(--c-primary) !important; color: #fff !important; border-color: var(--c-primary) !important; }

/* Timeline / FAQ / content pages ------------------------------------------ */
.timeline::before { background: var(--c-border) !important; }
.timeline-year { background: var(--c-primary) !important; color: #fff !important; box-shadow: none !important; }
.timeline-content { background: #fff !important; border: 1px solid var(--c-border) !important; box-shadow: none !important; border-radius: var(--radius-lg) !important; }
.timeline-content h4 { color: var(--c-ink) !important; }
.timeline-content p { color: var(--c-muted) !important; }
.content-wrapper { gap: 28px !important; }
.main-content,
.service-content { color: var(--c-ink); }
.sidebar-widget a { color: var(--c-muted) !important; }
.sidebar-widget a:hover { color: var(--c-primary) !important; background: var(--c-accent-pale) !important; }
.cta-section,
.cta-block {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cta-title,
.cta-description,
.cta-section h2,
.cta-section p { color: #fff !important; }

/* Forms / contact ---------------------------------------------------------- */
.contact-wrapper,
.contact-form-container,
.advanced-contact-form {
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
.form-group input,
.form-group textarea,
.form-group select,
.input-group input,
.chat-input input {
  background: #fff !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.input-group input:focus {
  border-color: var(--c-accent) !important;
  outline: 3px solid rgba(124,58,237,.10) !important;
}
.form-focus-border { display: none !important; }
.contact-item { border-color: var(--c-border) !important; }

/* Blog -------------------------------------------------------------------- */
.blog-grid .blog-card,
.post-card,
.blog-post,
.article-card {
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
.blog-toolbar,
.blog-search { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* Footer ------------------------------------------------------------------ */
.footer {
  background: var(--c-ink) !important;
  color: var(--c-slate) !important;
  padding: 56px 0 24px !important;
  box-shadow: none !important;
}
.footer-content {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.35fr) minmax(0, 2.65fr);
  gap: 48px !important;
  align-items: start;
}
.footer-company { max-width: 360px; }
.footer-logo .logo-text,
.footer-column h4 { color: #fff !important; }
.footer-description,
.footer-contact p,
.footer-column a,
.newsletter-column p { color: var(--c-slate) !important; }
.footer-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 28px !important;
}
.footer-column ul li { margin-bottom: 8px !important; }
.footer-column a:hover { color: #fff !important; transform: none !important; }
.footer-social-links { gap: 8px !important; }
.footer-social-links .social-link {
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.footer-bottom {
  margin-top: 36px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  color: var(--c-slate) !important;
}
.footer-bottom a { color: var(--c-slate) !important; }
.footer-bottom a:hover { color: #fff !important; }
.copyright p { color: var(--c-slate) !important; }

/* Floating controls -------------------------------------------------------- */
.float-whatsapp,
.scroll-top { box-shadow: var(--shadow-lg) !important; }
.chat-toggle {
  background: var(--c-primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-lg) !important;
}
.chat-widget {
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-xl) !important;
  border-radius: var(--radius-lg) !important;
}
.chat-header { background: var(--c-primary) !important; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .request-service-btn { display: none !important; }
  .nav-menu { gap: 0 !important; }
  .nav-link, .nav-menu > li > a:not(.nav-link) { padding-inline: 7px !important; }
  .hero > .container, .page-hero > .container { grid-template-columns: 1fr 360px; gap: 28px; }
}

@media (max-width: 992px) {
  .header { height: 64px !important; min-height: 64px; --header-h: 64px; }
  .navbar { min-height: 64px; }
  .nav-menu {
    background: #fff !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-xl) !important;
  }
  .nav-menu .nav-link,
  .nav-menu > li > a:not(.nav-link) { font-size: 14px !important; padding: 11px 14px !important; }
  .dropdown-content,
  .dropdown-menu { box-shadow: none !important; border-radius: var(--radius-md) !important; }
  .hero > .container,
  .page-hero > .container { grid-template-columns: 1fr !important; }
  .hero-visual { max-width: 640px; width: 100%; margin-inline: auto; }
  .footer-content { grid-template-columns: 1fr !important; }
  .footer-links { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 640px) {
  .container { padding-inline: 18px !important; }
  .hero { padding: 64px 0 48px !important; }
  .page-hero { padding: 48px 0 !important; }
  .hero-title, .page-hero .hero-title { font-size: 2.25rem !important; }
  .hero-description, .page-hero .hero-description { font-size: 16px !important; }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .about-section, .services-section, .projects-section, .testimonials-section,
  .blog-section, .partners-section, .contact-section, .features-section,
  .benefits-section, .services, .process, .portfolio, .about, .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .footer-links { grid-template-columns: 1fr !important; }
  .footer-bottom { align-items: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Legacy-safe structural fixes ------------------------------------------------
   Keep the v2 visual language without importing v2 component layout rules. */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* The legacy timeline uses absolute-positioned years.  The v2 library also had
   a .timeline-item grid, which collapsed the content into the 48px year column.
   Make the legacy timeline self-contained and direction-safe instead. */
.timeline {
  position: relative !important;
  display: grid !important;
  gap: 16px !important;
  max-width: 100% !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
}
.timeline::before { display: none !important; }
.timeline-item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin: 0 !important;
  min-width: 0;
}
.timeline-year {
  position: static !important;
  inset: auto !important;
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  font-size: 13px !important;
}
.timeline-content {
  min-width: 0;
  flex: 1 1 auto !important;
  padding: 18px 20px !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
}
.timeline-content h4 { margin: 0 0 6px !important; }
.timeline-content p { margin: 0 !important; }

/* Keep paired content blocks from becoming excessively narrow. */
.about-content,
.content-wrapper {
  min-width: 0;
}
.about-text,
.about-visual,
.main-content,
.service-content { min-width: 0; }

@media (max-width: 992px) {
  .about-content { grid-template-columns: 1fr !important; gap: 36px !important; }
  .container { padding-inline: 20px; }
}
@media (max-width: 640px) {
  .container { padding-inline: 16px !important; }
  .timeline-item { gap: 12px !important; }
  .timeline-year { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
  .timeline-content { padding: 14px 16px !important; }
}

/* ========================================================================== 
   Creative PS System Polish v3.2
   One compatibility layer for the legacy markup; no component-library import.
   ========================================================================== */

/* Base rhythm and accessibility */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-size: 16px;
  line-height: 1.75;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
main { min-height: 45vh; }
::selection { background: var(--c-accent-pale); color: var(--c-primary-dark); }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(124, 58, 237, .24) !important;
  outline-offset: 3px !important;
}

/* Real dark theme: preserve brand purple but swap surfaces/tokens. */
body.dark-theme {
  --c-bg: #0D0F14;
  --c-surface: #121620;
  --c-surface-2: #171C27;
  --c-cream: #17131C;
  --c-white: #151923;
  --c-ink: #F7F7FB;
  --c-ink-soft: #E8EAF0;
  --c-muted: #A9B0BE;
  --c-slate: #7F8796;
  --c-border: #2A3040;
  --c-accent-pale: rgba(124, 58, 237, .16);
  color-scheme: dark;
}

/* Header: consistent height, predictable stacking, calmer interactions. */
.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1100 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 88%, transparent) !important;
}
body.dark-theme .header {
  background: rgba(13, 15, 20, .94) !important;
  border-bottom-color: var(--c-border) !important;
}
.nav-link, .nav-menu > li > a:not(.nav-link) { font-weight: 650 !important; }
.dropdown-content, .dropdown-menu {
  border: 1px solid var(--c-border) !important;
  background: var(--c-white) !important;
  color: var(--c-ink) !important;
  box-shadow: var(--shadow-lg) !important;
}
.lang-toggle, .theme-toggle {
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  color: var(--c-ink) !important;
}

/* Hero/page intro: clean brand depth without particles or animation dependencies. */
.hero, .page-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(167, 139, 250, .18), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(124, 58, 237, .16), transparent 30%),
    linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 58%, #5C3288 100%) !important;
}
.hero::after, .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}
.page-hero-content { max-width: 860px !important; margin-inline: auto; }
.breadcrumb { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Sections and grids: one visual rhythm across legacy pages. */
.section-header { margin-inline: auto; text-align: center; }
.services-grid, .features-grid, .case-studies-grid, .benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch;
}
.service-card, .feature, .feature-item, .benefit, .case-card, .hardware-item, .sidebar-widget {
  padding: 28px !important;
}
.service-card, .feature, .feature-item, .benefit, .case-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  height: 100%;
}
.service-icon, .feature-icon, .contact-icon, .card-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 20px !important;
  margin-bottom: 18px !important;
}
.service-title, .case-title, .feature h3, .benefit h3 {
  font-size: 1.08rem !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
}
.service-description, .case-card p, .feature p, .benefit p { line-height: 1.8 !important; }
.service-link, .card-link, .project-link { margin-top: auto !important; padding-top: 16px; font-weight: 750 !important; }
.service-features, .feature-list, .benefits-list, .case-points { width: 100%; }
.service-features li, .feature-list li, .benefits-list li, .case-points li { line-height: 1.7 !important; }

/* Content panes/tables keep comfortable readable width. */
.main-content, .service-content { line-height: 1.85; }
.main-content > h2, .service-content > h2 { margin-top: 36px; }
.main-content > h3, .service-content > h3 { margin-top: 28px; }
.table-responsive { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
table { border-collapse: collapse; }
table th { background: var(--c-surface) !important; color: var(--c-ink) !important; }
table td, table th { border-color: var(--c-border) !important; }

/* CTA: premium contained block rather than a flat full-width stripe. */
.cta-section {
  background: var(--c-bg) !important;
  color: var(--c-ink) !important;
  padding: 64px 0 !important;
}
.cta-section .cta-content, .cta-block {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 58px) clamp(22px, 6vw, 72px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(167,139,250,.22), transparent 32%),
    linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%) !important;
  box-shadow: 0 22px 55px rgba(61,27,94,.18) !important;
  text-align: center;
}
.cta-section .cta-title, .cta-section .cta-description, .cta-section h2, .cta-section p,
.cta-block h2, .cta-block p { color: #fff !important; }
.cta-section .btn-primary, .cta-block .btn-primary {
  background: #fff !important;
  color: var(--c-primary) !important;
  border-color: #fff !important;
}
.cta-section .btn-outline, .cta-block .btn-outline {
  color: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
  background: transparent !important;
}

/* Forms */
.contact-wrapper, .contact-form-container, .advanced-contact-form {
  padding: clamp(22px, 4vw, 36px) !important;
  background: var(--c-white) !important;
}
.form-group label { color: var(--c-ink) !important; font-weight: 700 !important; }
.form-group input, .form-group textarea, .form-group select,
.input-group input, .chat-input input {
  min-height: 46px;
  background: var(--c-white) !important;
}
.form-group textarea { min-height: 128px; resize: vertical; }

/* Blog cards and article typography */
.blog-grid { gap: 24px !important; align-items: stretch; }
.blog-grid .blog-card, .post-card, .blog-post, .article-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white) !important;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base) !important;
}
.blog-grid .blog-card:hover, .post-card:hover, .article-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--c-accent-light) !important;
  box-shadow: var(--shadow-lg) !important;
}
.blog-image, .post-image, .article-image { overflow: hidden; aspect-ratio: 16 / 9; }
.blog-image img, .post-image img, .article-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-base);
}
.blog-card:hover .blog-image img, .post-card:hover .post-image img { transform: scale(1.025); }
.blog-content, .post-card-content, .article-content { padding: 24px !important; }
.blog-title { color: var(--c-ink) !important; line-height: 1.55 !important; }
.blog-excerpt { color: var(--c-muted) !important; line-height: 1.75 !important; }
.post-hero { max-width: 840px; margin-inline: auto; }
.post-title { color: var(--c-ink) !important; font-size: clamp(2rem, 5vw, 3.25rem) !important; line-height: 1.32 !important; }
.post-meta { color: var(--c-muted) !important; }
.post-cover { max-width: 980px; margin: 26px auto 34px; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--c-border); }
.post-cover img { width: 100%; display: block; max-height: 520px; object-fit: cover; }
.post-content {
  max-width: 820px;
  margin-inline: auto;
  color: var(--c-ink) !important;
  font-size: 1.04rem;
  line-height: 2;
}
.post-content h2 { font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.45; margin: 42px 0 16px; color: var(--c-ink); }
.post-content h3 { font-size: 1.25rem; line-height: 1.5; margin: 32px 0 12px; color: var(--c-primary); }
.post-content p, .post-content ul, .post-content ol { margin-bottom: 18px; }
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.post-content blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  background: var(--c-accent-pale);
  border-inline-start: 4px solid var(--c-accent);
  border-radius: var(--radius-md);
  color: var(--c-ink-soft);
}
.post-content pre { overflow-x: auto; padding: 18px; border-radius: var(--radius-md); background: #11131A; color: #ECEEF4; }
.post-content code { font-family: var(--font-mono); }
.post-content table { width: 100%; min-width: 560px; }

/* Dark mode corrections for legacy rules that hard-coded white. */
body.dark-theme .filter-btn,
body.dark-theme .timeline-content,
body.dark-theme .contact-wrapper,
body.dark-theme .contact-form-container,
body.dark-theme .advanced-contact-form,
body.dark-theme .blog-grid .blog-card,
body.dark-theme .post-card,
body.dark-theme .blog-post,
body.dark-theme .article-card,
body.dark-theme .form-group input,
body.dark-theme .form-group textarea,
body.dark-theme .form-group select,
body.dark-theme .input-group input,
body.dark-theme .chat-input input { background: var(--c-white) !important; color: var(--c-ink) !important; }
body.dark-theme .services-section,
body.dark-theme .testimonials-section,
body.dark-theme .partners-section,
body.dark-theme .features-section,
body.dark-theme .services,
body.dark-theme .process { background: var(--c-surface) !important; }
body.dark-theme .projects-section,
body.dark-theme .blog-section,
body.dark-theme .about-section,
body.dark-theme .contact-section,
body.dark-theme .portfolio,
body.dark-theme .about,
body.dark-theme .cta-section { background: var(--c-bg) !important; }

/* Footer always stays ink-dark, independent of light/dark token inversion. */
.footer { background: #0F0F14 !important; }
.footer .newsletter-form input { background: rgba(255,255,255,.07) !important; color: #fff !important; border-color: rgba(255,255,255,.12) !important; }

@media (max-width: 1024px) {
  .services-grid, .features-grid, .case-studies-grid, .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.dark-theme .nav-menu { background: var(--c-white) !important; border-color: var(--c-border) !important; }
}
@media (max-width: 640px) {
  .services-grid, .features-grid, .case-studies-grid, .benefits-grid { grid-template-columns: 1fr !important; }
  .service-card, .feature, .feature-item, .benefit, .case-card, .hardware-item, .sidebar-widget { padding: 22px !important; }
  .cta-section { padding: 48px 0 !important; }
  .cta-section .cta-content, .cta-block { border-radius: 16px !important; padding: 32px 20px !important; }
  .post-content { font-size: 1rem; line-height: 1.9; }
  .post-title { font-size: clamp(1.75rem, 9vw, 2.4rem) !important; }
}