/* SAMITIS layer over the RiteFlow template: brand, Persian font/RTL fixes, new components. */
@font-face { font-family: "Vazir"; src: url("../fonts/Vazir-Light-FD.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Vazir"; src: url("../fonts/Vazir-Regular-FD.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazir"; src: url("../fonts/Vazir-Medium-FD.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazir"; src: url("../fonts/Vazir-Bold-FD.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }

html[lang="fa"] {
    --font-urbanist: "Vazir", sans-serif;
    --font-dmSans: "Vazir", sans-serif;
    --font-instrument: "Vazir", sans-serif;
    --font-sans: "Vazir", sans-serif;
}
html[lang="fa"] body,
html[lang="fa"] button,
html[lang="fa"] input { font-family: "Vazir", sans-serif; }
/* Chrome spaces out Persian letters (breaking their joins) when letter-spacing is non-zero. */
html[lang="fa"] body * { letter-spacing: 0 !important; }
html[lang="fa"] .italic { font-style: normal; }

/* Logo: the S mark keeps its own colours; the navy wordmark is shown white on the dark theme. The lockup reads
   left to right on Persian pages too. */
:is(.logo, .loader-logo):has(.samitis-mark) { display: inline-flex; align-items: center; gap: 10px; direction: ltr; }
.samitis-mark { height: 36px; width: auto; }
.samitis-logo { filter: brightness(0) invert(1); height: 15px; width: auto; }
.loader-logo .samitis-mark { height: 24px; }
.loader-logo .samitis-logo { height: 10px; }
.samitis-logo.footer-wordmark { display: block; width: 100%; height: auto; opacity: .9; }
/* Integrations hub: the S mark at its centre, on a dark orb with a violet ring (white orb on the light theme). */
.integrations-hub-orb:has(.samitis-hub-mark) { background-image: linear-gradient(180deg, #1e2442, #0e1422);
  box-shadow: inset 0 0 0 1.5px rgba(125, 118, 255, .55), 0 0 24px rgba(0, 0, 0, .25); }
.integrations-hub-orb > div:has(.samitis-hub-mark) { width: 62%; }
.integrations-hub-icon.samitis-hub-mark { width: 100%; height: auto; }

/* About: implementation steps. One responsive timeline instead of the template's scroll-pinned wheel, which broke
   between breakpoints and showed a second, different set of steps below lg. Logical properties, so the same rules
   read right-to-left on the Persian pages. Phones: vertical, node beside card, joined by a line; tablets: 2x2;
   lg and up: four across, nodes joined by a line above the cards. */
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.process-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.process-step-node { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.25rem; font-weight: 600; background: linear-gradient(180deg, #7d76ff, #2f27b1);
  box-shadow: 0 0 0 6px rgba(125, 118, 255, .12), 0 12px 28px -10px rgba(79, 70, 229, .75); }
.process-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 25px; top: 58px; bottom: -22px;
  border-inline-start: 2px dashed rgba(167, 139, 250, .45); }
.process-step-body { height: 100%; padding: 22px 22px 24px; border-radius: 20px; background: var(--color-blue);
  border: 1px solid var(--color-lineColor); }
.process-step-label { display: block; font-size: .75rem; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--color-tertiary); }
.process-step-title { margin-top: 10px; font-size: 1.375rem; line-height: 1.35; font-weight: 600; color: var(--color-offWhite); }
.process-step-desc { margin-top: 10px; line-height: 1.8; color: var(--color-paragraph); }
@media (min-width: 768px) {
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .process-step::before { display: none; }
}
@media (min-width: 1024px) {
  .process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .process-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; justify-items: center; gap: 22px; text-align: center; }
  .process-step:not(:last-child)::before { display: block; top: 25px; bottom: auto; inset-inline-start: calc(50% + 40px);
    width: calc(100% - 60px); border-inline-start: 0; border-top: 2px dashed rgba(167, 139, 250, .45); }
  .process-step-body { width: 100%; }
}

.lang-switch {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 40px; padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
    color: #fff; font-size: 14px; transition: border-color .3s;
}
.lang-switch:hover { border-color: rgba(255, 255, 255, .5); }

.logo-auto-slider .swiper-slide { width: auto; }
.module-chip {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .45rem 1rem .45rem .5rem;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .85); white-space: nowrap; font-size: 15px;
}
html[dir="rtl"] .module-chip { padding: .45rem .5rem .45rem 1rem; }
.module-chip img { width: 30px; height: 30px; border-radius: 8px; }

.iran-tile { display: block; color: #fff; font-size: 1.15rem; font-weight: 500; text-align: center; line-height: 1.7; }

#pricing .price { font-size: 32px; }

/* rtlcss mirrors rotations too; the back-to-top diamond and its arrow must keep pointing up. */
html[dir="rtl"] .progress { transform: translateX(-20px) rotate(45deg); }
html[dir="rtl"] .progress.setvissible { transform: translateX(0px) rotate(45deg); }
@keyframes gototop {
    0%, 100% { transform: scale(1) rotate(-135deg); }
}

/* Display font for Persian headings (IBM Plex Sans Arabic, SIL OFL, self-hosted); body text stays Vazir. */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-600-arabic.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-700-arabic.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4 { font-family: "IBM Plex Sans Arabic", "Vazir", sans-serif; }
html[lang="fa"] h1, html[lang="fa"] h2 { font-weight: 700; }
html[lang="fa"] h1 { font-size: clamp(34px, 5vw, 56px); }
/* The brand accent inside headings uses --font-instrument (an italic Latin serif in English). */
html[lang="fa"] { --font-instrument: "IBM Plex Sans Arabic", "Vazir", sans-serif; }
html[lang="fa"] h1 .font-instrument, html[lang="fa"] h2 .font-instrument { font-weight: 700; }
/* Tailwind's !leading-[1.2] lives in @layer utilities; for !important rules an earlier layer
   wins, so this has to sit in @layer base to beat it. Leave room for dots below the line. */
@layer base {
    html[lang="fa"] h1, html[lang="fa"] h2 { line-height: 1.4 !important; }
}
/* Vazir-FD renders the counters' digits as Persian numerals; IBM Plex would show Latin ones. */
html[lang="fa"] .counter { font-family: "Vazir", sans-serif; }
/* The template's scrollbar thumb is the same translucent violet as its track, so it vanishes:
   dark track, bright brand thumb. Firefox has no ::-webkit-scrollbar, only scrollbar-color. */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0b101c; backdrop-filter: none; }
body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a5a0ff, #6a62f5); border: 2px solid #0b101c; border-radius: 10px; backdrop-filter: none; }
body::-webkit-scrollbar-thumb:hover { background: #c4c0ff; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: #8f89ff #0b101c; } }
/* AI showcase (home #ai, features #ai, modules "AI" filter, header link): the AI items carry
   a violet glow so they read as the platform's highlight, and every one is labelled "coming soon". */
.ai-spark { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; }
.ai-badge { display: inline-flex; align-items: center; gap: 8px; color: #e9e7ff; border-color: rgba(143, 137, 255, .6); background: rgba(125, 118, 255, .16); }
.ai-card { background: linear-gradient(180deg, rgba(125, 118, 255, .16), rgba(14, 20, 34, .55) 70%); border-color: rgba(143, 137, 255, .5); box-shadow: 0 20px 50px -24px rgba(125, 118, 255, .65); }
.ai-icon { background: linear-gradient(135deg, #a5a0ff, #5b54e6); box-shadow: 0 6px 18px -6px rgba(125, 118, 255, .9); }
.ai-icon .ai-spark { width: 20px; height: 20px; color: #fff; }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #e9e7ff; background: rgba(125, 118, 255, .18); border: 1px solid rgba(143, 137, 255, .5); }
.ai-chip .ai-spark { width: 12px; height: 12px; color: #b9b5ff; }
.ai-nav { display: inline-flex; align-items: center; gap: 6px; color: #c9c5ff !important; font-weight: 600; }
.ai-nav .ai-spark { color: #a5a0ff; }
.ai-filter { display: inline-flex; align-items: center; gap: 6px; color: #e9e7ff !important; border-color: rgba(143, 137, 255, .55) !important; background: rgba(125, 118, 255, .14); }
.ai-points li { justify-content: center; text-align: start; }
.ai-points .ai-spark { margin-top: 5px; color: #a5a0ff; }
.ai-note { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .6); }
/* Theme switch (header): shows the sun in dark mode, the moon in light mode. */
.theme-toggle { width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--color-lineColor); color: var(--color-offWhite); background: transparent; cursor: pointer; transition: border-color .2s, background .2s; }
.theme-toggle:not(.hidden) { display: inline-flex; }
@media (min-width: 40rem) { .theme-toggle.sm\:inline-flex { display: inline-flex; } }
.theme-toggle:hover { border-color: var(--color-slateBlue); background: rgba(125, 118, 255, .12); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-icon-moon, html[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }

/* ===== Light theme (html[data-theme="light"], toggled from the header, remembered per browser).
   The template is dark-first and colours almost everything through Tailwind's --color-* tokens,
   so the theme flips the tokens and then patches the few hard-coded dark gradients/fades. */
html[data-theme="light"] {
    color-scheme: light;
    --color-secondary: #f4f5fb;      /* page */
    --color-blue: #ffffff;           /* cards, panels */
    --color-charcoalBlue: #eceefb;   /* badges, chips */
    --color-lineColor: #dfe3ef;
    --color-offWhite: #161a2c;       /* main text */
    --color-paragraph: #3b4257d9;
    --color-platinum: #2b3147;
    --color-white: #121628;          /* text-white is used for text, so it turns dark */
    --color-black: #fff;
}
/* Anything on a saturated indigo fill keeps white text. */
html[data-theme="light"] :is(.button-primary, .bg-primary, .ai-icon, .bg-\[\#6860F0\], .toggle-wrapper) { --color-white: #fff; }
html[data-theme="light"] .button-primary { color: #fff; }
html[data-theme="light"] :is(.gradient-text, .loader-title div, .demoGradient-text) {
    background: linear-gradient(180deg, #161a2c 55%, #5b54e6 95%); -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] :is(.gradient-border, .verticle-gradient-bg) { background: linear-gradient(90deg, #e3e6f2 15%, #6a62f5 50%, #e3e6f2 85%); }
html[data-theme="light"] .gradient-border-top { background: linear-gradient(90deg, rgba(167, 139, 250, .8), rgba(79, 70, 229, .8), rgba(244, 245, 251, .8)); }
html[data-theme="light"] .samitis-logo { filter: none; }
html[data-theme="light"] .process-step-body { box-shadow: 0 1px 2px rgba(22, 26, 44, .04), 0 12px 30px -18px rgba(22, 26, 44, .18); }
html[data-theme="light"] .integrations-hub-orb:has(.samitis-hub-mark) { background-image: linear-gradient(180deg, #fff, #e8ecfa);
  box-shadow: inset 0 0 0 1.5px rgba(125, 118, 255, .35), 0 12px 30px -14px rgba(22, 26, 44, .3); }
html[data-theme="light"] .header-area { background: rgba(244, 245, 251, .88); backdrop-filter: blur(14px); }
html[data-theme="light"] :is(.useCase-card, .bg-blue) { box-shadow: 0 1px 2px rgba(22, 26, 44, .04), 0 12px 30px -18px rgba(22, 26, 44, .18); }
html[data-theme="light"] .badge-button { color: #3d36c9; }
html[data-theme="light"] :is(.bg-\[\#222938\]) { background-color: #eceefb; }
html[data-theme="light"] :is(.from-\[\#27295A\]) { --tw-gradient-from: #eceefb; }
html[data-theme="light"] :is(.to-\[\#191A4C\]) { --tw-gradient-to: #e3e6f7; }
html[data-theme="light"] .ring-offset-\[\#12162a\] { --tw-ring-offset-color: #f4f5fb; }
/* dark fades/overlays that blend sections into the old page colour */
html[data-theme="light"] .testimonial-overlay { background: linear-gradient(90deg, #f4f5fb, #f4f5fb00); }
html[data-theme="light"] .demo-slider-overlay { background: #f4f5fb; }
/* style.css pins these sections to the dark page colour with !important */
html[data-theme="light"] :is(.workflow-bg-secondary, [data-workflow-integrations]) { background-color: var(--color-secondary) !important; }
html[data-theme="light"] .journey-edge--left { background: linear-gradient(90deg, #f4f5fb, rgba(244, 245, 251, 0)); }
html[data-theme="light"] .journey-edge--right { background: linear-gradient(270deg, #f4f5fb, rgba(244, 245, 251, 0)); }
html[data-theme="light"] :is(.journey-axis-base, .journey-stem, .journey-stem--down, .journey-stem--up) { background: rgba(22, 26, 44, .2); }
html[data-theme="light"] .extended-border-card { background: linear-gradient(180deg, #e9e8ff, #6a62f5 50%, #f4f5fb); }
/* decorative glow PNGs were painted for a dark page */
html[data-theme="light"] img[src*="glow"], html[data-theme="light"] img[src*="-shape"] { opacity: .35; }
/* AI accents on light */
html[data-theme="light"] .ai-card { background: linear-gradient(180deg, rgba(125, 118, 255, .10), #fff 70%); border-color: rgba(91, 84, 230, .35); box-shadow: 0 18px 40px -24px rgba(91, 84, 230, .45); }
html[data-theme="light"] :is(.ai-badge, .ai-chip, .ai-filter) { color: #3d36c9 !important; background: rgba(125, 118, 255, .12); border-color: rgba(91, 84, 230, .4) !important; }
html[data-theme="light"] .ai-chip .ai-spark, html[data-theme="light"] .ai-nav .ai-spark, html[data-theme="light"] .ai-points .ai-spark { color: #5b54e6; }
html[data-theme="light"] .ai-nav { color: #4f46e5 !important; }
html[data-theme="light"] .ai-note { color: #4b5268; }
html[data-theme="light"] body::-webkit-scrollbar-track { background: #e6e8f2; }
html[data-theme="light"] body::-webkit-scrollbar-thumb { border-color: #e6e8f2; }
@supports not selector(::-webkit-scrollbar) { html[data-theme="light"] { scrollbar-color: #6a62f5 #e6e8f2; } }
html[data-theme="light"] .lang-switch { color: var(--color-offWhite); border-color: rgba(22, 26, 44, .18); }
html[data-theme="light"] .lang-switch:hover { border-color: rgba(22, 26, 44, .45); }
html[data-theme="light"] .button-secondary { background: linear-gradient(180deg, #2a3050, #161a2c) !important; color: #fff !important; --color-white: #fff; }
/* page heroes paint banner-bg.webp (a dark navy/violet glow); swap it for a light glow */
html[data-theme="light"] img[src*="banner-bg"] { opacity: 0 !important; }  /* GSAP sets inline opacity */
html[data-theme="light"] :has(> img[src*="banner-bg"]) { background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(125, 118, 255, .22), rgba(244, 245, 251, 0) 70%); }
html[data-theme="light"] .module-chip { border-color: rgba(22, 26, 44, .12); background: #fff; color: #2b3147; box-shadow: 0 6px 18px -12px rgba(22, 26, 44, .25); }
html[data-theme="light"] .iran-tile { color: #161a2c; }
/* SplitText turns the loader word into inline-block letters; in an RTL page they ran right-to-left ("SITIMAS"). */
.loader-title { direction: ltr; }
html[data-theme="light"] .morph-me { fill: #f4f5fb; }
html[data-theme="light"] .loader-bg image { opacity: 0; }
/* brand tagline above the footer copyright */
.footer-tagline { margin-bottom: 10px; font-size: 17px; font-weight: 600; color: var(--color-offWhite); }
html[lang="fa"] .footer-tagline { font-family: "IBM Plex Sans Arabic", "Vazir", sans-serif; }