/* =====================================================================
   1coder — pro.css
   Layer 2: bug fixes (cursor / rail / performance) + pro feature styles.
   Loaded after main.css so every rule here intentionally wins.
   ===================================================================== */

/* =========================================================
   A) CUSTOM CURSOR — always on top, always cheap
   The halo used a 760px blurred + blended layer; that forced a
   full-viewport repaint on every frame (very heavy above a
   backdrop-filter overlay). Smaller, unblurred, and hidden while
   an overlay is open.
   ========================================================= */
.cur-glow {
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  filter: none;
  will-change: transform;
  contain: strict;
}
.cur-ring,
.cur-dot {
  z-index: 2147483000;
  will-change: transform;
  contain: strict;
}
html.overlay-open .cur-glow { visibility: hidden; }

/* Native HTML5 drag ghosting freezes pointer events (the cursor used to
   stick at the press point). Kill dragging on interactive surfaces. */
img,
a,
button,
.case,
.case-shot,
.thumb,
.rail,
.rail * ,
.browser-shot {
  -webkit-user-drag: none;
  user-drag: none;
}

/* =========================================================
   B) SECTION RAIL — real scroll scrubber, comfortable hit area
   ========================================================= */
.rail {
  z-index: 2147482000; /* above nav / sheet, below the cursor */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.rail-in {
  position: relative;
  cursor: grab;
}
.rail.is-scrubbing .rail-in { cursor: grabbing; }
.rail a {
  width: 32px;
  height: 30px;
  margin: 0 -3px;
}
.rail-track {
  position: absolute;
  inset: 8px auto 8px 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  pointer-events: none;
}
.rail-track i {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: top;
  transition: height 90ms linear;
}
.rail.is-scrubbing .rail-track i { transition: none; }
.rail-hint {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--surface);
  background: var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.rail.is-scrubbing .rail-hint,
.rail-in:hover .rail-hint { opacity: .92; }

/* =========================================================
   C) OVERLAYS — cheap veils, transform-only motion
   ========================================================= */
.modal-veil,
.sheet::before { will-change: opacity; }
html.overlay-open .noise { display: none; }

/* =========================================================
   D) SKELETON (shared)
   ========================================================= */
.sk {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 5%, var(--surface));
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 7%, transparent), transparent);
  animation: sk 1.1s infinite;
}
@keyframes sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* =========================================================
   E) PROJECT FILTERS + CARD META
   ========================================================= */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 26px;
}
.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--line-2); transform: translateY(-1px); }
.chip[aria-pressed="true"] {
  color: var(--surface);
  background: var(--fg);
  border-color: var(--fg);
}
.chip b { font-weight: 600; opacity: .55; margin-inline-start: 6px; font-size: 11px; }
.case.is-off { display: none; }

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.tag {
  font-size: 11px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--line);
}
.case-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.case-live {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, #0b1220 72%, transparent);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.case-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38d17a;
  box-shadow: 0 0 0 0 color-mix(in srgb, #38d17a 60%, transparent);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .case-live i { animation: none; } }

/* =========================================================
   F) LIVE PREVIEW MODAL (quick look)
   ========================================================= */
.pv-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pv-devices { display: flex; gap: 6px; }
.pv-devices button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 9px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.pv-devices button[aria-pressed="true"] { color: var(--surface); background: var(--fg); border-color: var(--fg); }
.pv-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 3%, var(--surface));
  padding: 12px;
  display: flex;
  justify-content: center;
}
.pv-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: max-width var(--t) var(--ease);
}
.pv-stage[data-device="tablet"] .pv-frame { max-width: 620px; aspect-ratio: 3 / 4; }
.pv-stage[data-device="mobile"] .pv-frame { max-width: 340px; aspect-ratio: 9 / 16; }
.pv-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.pv-note { font-size: 12px; color: var(--faint); margin-top: 12px; }

/* =========================================================
   G) STICKY CTA + QUICK CONTACT
   ========================================================= */
.cta-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 76;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(105%);
  transition: transform var(--t) var(--ease-out);
}
.cta-bar.on { transform: none; }
.cta-bar p { font-size: 13.5px; color: var(--muted); margin: 0; }
.cta-bar .x {
  appearance: none;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
}
@media (max-width: 640px) { .cta-bar p { display: none; } }

.fab {
  position: fixed;
  inset-inline-start: 20px;
  bottom: 20px;
  z-index: 78;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
}
.fab-main {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--fg);
  color: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform var(--t-fast) var(--ease);
}
.fab-main:hover { transform: translateY(-2px) scale(1.04); }
.fab-main svg { width: 22px; height: 22px; }
.fab-list {
  display: grid;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.fab.on .fab-list { opacity: 1; visibility: visible; transform: none; }
.fab-list a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease);
}
.fab-list a:hover { transform: translateY(-2px); }
.fab-list svg { width: 20px; height: 20px; }

/* =========================================================
   H) COMMAND PALETTE (Ctrl/⌘ + K)
   ========================================================= */
.pal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  padding: 12vh 16px 16px;
  justify-content: center;
  align-items: flex-start;
}
.pal.on { display: flex; }
.pal-veil {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}
.pal-box {
  position: relative;
  width: min(620px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  animation: palIn var(--t) var(--ease-out);
}
@keyframes palIn { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .pal-box { animation: none; } }
.pal-box input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  padding: 16px 18px;
  outline: none;
}
.pal-list { max-height: 52vh; overflow: auto; padding: 8px; }
.pal-list li { list-style: none; }
.pal-list button {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: start;
  appearance: none;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.pal-list button small { color: var(--faint); font-size: 11.5px; margin-inline-start: auto; }
.pal-list li.sel button,
.pal-list button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pal-empty { padding: 22px 16px; color: var(--faint); font-size: 13px; text-align: center; }
.pal-foot {
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--faint);
}
kbd {
  font: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--muted);
}

/* =========================================================
   I) TRUST BLOCKS — guarantees, logos, changelog
   ========================================================= */
.grid-4 {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}
.grid-3 {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.gcard {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 22px;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.gcard:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.gcard i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  margin-bottom: 14px;
}
.gcard i svg { width: 20px; height: 20px; }
.gcard h3 { font-size: 15.5px; margin: 0 0 8px; }
.gcard p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.85; }
.gcard .kpi { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.logos a {
  flex: 1 1 200px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.logos a:hover { transform: translateY(-2px); border-color: var(--line-2); }
.logos b { font-size: 14px; font-weight: 600; }
.logos span { font-size: 11.5px; color: var(--faint); display: block; }
.logos u {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--surface);
  background: var(--fg);
}

.log { display: grid; gap: 0; }
.log-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.log-row:first-child { border-top: 0; }
.log-row time { font-size: 12.5px; color: var(--faint); }
.log-row h3 { font-size: 15px; margin: 0 0 6px; }
.log-row p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.85; }
.log-row .badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-inline-start: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
@media (max-width: 640px) { .log-row { grid-template-columns: 1fr; gap: 6px; } }

/* =========================================================
   J) PRICE ESTIMATOR
   ========================================================= */
.est {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 26px;
  display: grid;
  gap: 22px;
  grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 860px) { .est { grid-template-columns: 1fr; } }
.est fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.est legend { font-size: 13px; color: var(--muted); margin-bottom: 10px; padding: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  position: relative;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 13px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) {
  color: var(--fg);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.est-out {
  align-self: start;
  position: sticky;
  top: 96px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: color-mix(in srgb, var(--fg) 3%, var(--surface));
}
.est-out .num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; direction: rtl; }
.est-out .unit { font-size: 13px; color: var(--muted); }
.est-out ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.est-out li { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.est-out .fine { font-size: 11.5px; color: var(--faint); margin-top: 14px; line-height: 1.8; }

/* =========================================================
   K) MULTI-STEP BRIEF FORM
   ========================================================= */
.steps { display: flex; gap: 8px; margin-bottom: 20px; }
.steps span {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  overflow: hidden;
}
.steps span.on { background: var(--accent); }
.step-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.step-head h3 { font-size: 16px; margin: 0; }
.step-head small { font-size: 12px; color: var(--faint); }
.step { display: none; }
.step.on { display: block; animation: stepIn 260ms var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .step.on { animation: none; } }
.form-nav { display: flex; gap: 10px; margin-top: 20px; }
.form-nav .btn { flex: 1; justify-content: center; }
.draft {
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.draft button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
}

/* =========================================================
   L) TOAST + A11Y + MISC
   ========================================================= */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 26px;
  z-index: 140;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.toast span {
  background: var(--fg);
  color: var(--surface);
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
}
.toast.on span { transform: none; opacity: 1; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
[hidden] { display: none !important; }
.lang-btn { font-variant-numeric: tabular-nums; }
html[lang="en"] .fa-only { display: none; }
html[lang="fa"] .en-only { display: none; }

/* ---- build-time additions ---- */
.case{position:relative}
.is-off{display:none!important}
.logos-item{flex:1 1 190px;display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);color:var(--fg);
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.logos-item:hover{transform:translateY(-2px);border-color:var(--line-2)}
.logos-item u{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;text-decoration:none;
  font-weight:700;font-size:12.5px;color:var(--surface);background:var(--fg)}
.logos-item b{font-size:14px;font-weight:600}
.logos-item span{display:block;font-size:11.5px;color:var(--faint);font-weight:400}
@view-transition{navigation:auto}

/* =========================================================
   SECTION RAIL v2 — smooth progress, real handle, clickable dots
   ========================================================= */
.rail-track i {
  height: 100%;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 120ms linear;
  will-change: transform;
}
.rail.is-scrubbing .rail-track i { transition: none; }
.rail-thumb {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translate3d(-50%, 0, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease);
  will-change: transform;
}
.rail-in:hover .rail-thumb,
.rail.is-scrubbing .rail-thumb { opacity: 1; }
.rail a .rail-dot {
  transition: height 200ms var(--ease), transform 160ms var(--ease),
              background-color 160ms linear, box-shadow 160ms linear;
}
.rail.is-scrubbing .rail-dot { transition: none; }
.rail.is-scrubbing .rail-tip { opacity: 0 !important; visibility: hidden !important; }
.rail-hint { font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) {
  .rail-track i, .rail-thumb, .rail a .rail-dot { transition: none; }
}

/* =========================================================
   NATIVE SCROLLBAR + CURSOR HANDOFF
   A DOM cursor can never paint above the browser scrollbar, so the
   scrollbar is styled to match the UI and the system cursor is restored
   whenever the pointer is over that strip.
   ========================================================= */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 26%, transparent) transparent; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--fg) 26%, transparent);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background-clip: content-box;
  }
}
html.cursor-native,
html.cursor-native * { cursor: auto !important; }
html.cursor-native a,
html.cursor-native button,
html.cursor-native [role="button"],
html.cursor-native label { cursor: pointer !important; }
html.cursor-native .cur-dot,
html.cursor-native .cur-ring,
html.cursor-native .cur-glow { opacity: 0 !important; }

/* =========================================================
   IN-PAGE SCROLLBAR (#vbar)
   The native scrollbar is hidden only when this one is live (the class is
   added by JS), so without JS the page keeps a normal scrollbar.
   ========================================================= */
@media (pointer: fine) {
  html.vbar-on { scrollbar-width: none; -ms-overflow-style: none; }
  html.vbar-on::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
  html.vbar-on body::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
}
#vbar {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 16px;
  height: 100vh;
  z-index: 2147481500;
  display: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
html.vbar-on #vbar { display: block; }
#vbar i {
  position: absolute;
  top: 0;
  right: 5px;
  left: auto;
  width: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 32%, transparent);
  opacity: .5;
  transform: translate3d(0, 0, 0);
  transition: width 160ms var(--ease), right 160ms var(--ease),
              opacity 260ms linear, background-color 160ms linear;
  will-change: transform;
}
#vbar:hover i,
#vbar.is-drag i {
  width: 10px;
  right: 3px;
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 74%, transparent);
}
html.vbar-idle #vbar i { opacity: .2; }
html.vbar-drag { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { #vbar i { transition: none; } }

/* direct #hash landings clear the sticky header */
section[id] { scroll-margin-top: 92px; }