/* ===== قیمت‌یاب — دسیستم طراحی کامل (تم تیره / رنگ نارنجی) ===== */
:root {
 /* === Palette (dark + amber) === */
 --c-bg: #0a0a0d;
 --c-bg-panel: #121218;
 --c-bg-panel-2: #1a1a22;
 --c-surface: #1f1f2a;
 --c-border: #30303e;
 --c-border-strong: #414155;
 --c-text: #e6e6f0;
 --c-text-dim: #a8a8bc;
 --c-text-dimmer: #7b7b92;
 --c-primary: #ff6b2f; /* naranji moshkel */
 --c-primary-600: #e65a20;
 --c-primary-700: #cc4e18;
 --c-primary-glow: #ff8a55;
 --c-accent: #ffd54f;
 --c-accent-emphasis: #ffea83;
 --c-success: #26d09f;
 --c-warning: #ffb834;
 --c-error: #ff5e79;
 --c-info: #4dabff;
 /* === Spacing scale (8-point) === */
 --sp-xxs: .25rem;
 --sp-xs: .5rem;
 --sp-sm: .75rem;
 --sp-md: 1rem;
 --sp-lg: 1.25rem;
 --sp-xl: 1.5rem;
 --sp-xxl: 2rem;
 --sp-xxxl: 2.75rem;
 --sp-xxxxl: 3.5rem;
 /* === Layout === */
 --radius-sm: .375rem;
 --radius-md: .625rem;
 --radius-lg: .9rem;
 --radius-xl: 1.25rem;
 --radius-full: 9999px;
 --shadow-sm: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px var(--c-border);
 --shadow-md: 0 4px 12px rgba(0,0,0,.35), inset 0 0 0 1px var(--c-border);
 --shadow-lg: 0 8px 28px rgba(0,0,0,.45), inset 0 0 0 1px var(--c-border);
 --shadow-xl: 0 16px 40px rgba(0,0,0,.55), inset 0 0 0 1px var(--c-border);
 --shadow-primary: 0 8px 24px var(--c-primary), inset 0 0 0 1px var(--c-border);
 --shadow-primary-hover: 0 12px 32px var(--c-primary), inset 0 0 0 1px var(--c-border);
 /* === Transitions === */
 --ease-out: cubic-bezier(.2, 0, .2, 1);
 --ease-in: cubic-bezier(.4, 0, .6, 1);
 --t-fast: 120ms;
 --t-base: 240ms;
 --t-slow: 400ms;
 --t-slower: 650ms;
 /* === Typography === */
 --font-sans: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 --font-display: "Vazirmatn", -apple-system, sans-serif;
 --fw-regular: 400;
 --fw-medium: 500;
 --fw-semibold: 600;
 /* === Gradient === */
 --gradient-primary: linear-gradient(135deg, var(--c-primary), var(--c-primary-700));
 --gradient-primary-hover: linear-gradient(135deg, var(--c-primary-600), var(--c-primary));
 --gradient-hero: linear-gradient(135deg, rgba(255,107,47,.15), rgba(255,213,79,.1));
 --gradient-card: linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
 /* === Misc === */
 --max-width: 72rem;
 --max-width-wide: 82rem;
 --transition-base: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

/* ===== Modern Reset + Base ===== */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
html {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-size: 100%; /* 16px base */
}
html {
 scroll-behavior: smooth;
}
body {
 min-height: 100vh;
 background: var(--c-bg);
 color: var(--c-text);
 font-family: var(--font-sans);
 font-weight: var(--fw-regular);
 font-size: 1rem;
 line-height: 1.6;
 -webkit-tap-highlight-color: transparent;
}
img,
picture,
svg {
 display: block;
 max-width: 100%;
}
svg {
 fill: currentColor;
 flex-shrink: 0;
}
button,
input,
select,
textarea {
 font-family: inherit;
 font-weight: inherit;
 color: inherit;
}
button {
 cursor: pointer;
}
a {
 color: inherit;
 text-decoration: none;
}
ul {
 list-style: none;
}
table {
 border-collapse: collapse;
}
/* Persian digit fix helper */
body {
 font-feature-settings: "tnum";
}
/* Selection */
::selection {
 background: var(--c-primary);
 color: #fff;
}
/* Focus ring */
:focus-visible {
 outline: 2px solid var(--c-primary);
 outline-offset: 2px;
}
/* Visually hidden */
.visually-hidden,
.visually-hidden:not(:focus):not(:active) {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0,0,0,0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}
/* ===== Container ===== */
.container {
 width: min(100% - 2rem, var(--max-width));
 margin-inline: auto;
 padding-inline: 1.25rem;
}
.container--wide {
 max-width: var(--max-width-wide);
 width: min(100% - 2rem, var(--max-width-wide));
}


/* ===== Header / Nav ===== */
.header {
 position: sticky;
 top: 0;
 z-index: 90;
 backdrop-filter: blur(16px);
 background: color-mix(in srgb, var(--c-bg-panel), transparent 10%);
 border-bottom: 1px solid var(--c-border);
 transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.header.scrolled {
 background: color-mix(in srgb, var(--c-bg-panel), transparent 5%);
 box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.header__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: (--sp-md);
 min-height: 4.5rem;
 padding-block: .5rem;
}
.logo {
 display: inline-flex;
 flex-direction: column;
}
.logo__link {
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 font-weight: 800;
 font-size: 1.375rem;
 color: var(--c-text);
 line-height: 1.2;
 transition: color var(--t-fast) var(--ease-out);
}
.logo__link:hover {
 color: var(--c-primary-glow);
}
.logo__icon {
 width: 1.75rem;
 height: 1.75rem;
 flex-shrink: 0;
}
.logo__tagline {
 font-size: .7rem;
 font-weight: 500;
 color: var(--c-text-dim);
 line-height: 1.3;
 margin-inline-start: 2.25rem;
}
.nav {
 display: flex;
 align-items: center;
}
.nav__list {
 display: flex;
 align-items: center;
 gap: var(--sp-lg);
}
.nav__link {
 position: relative;
 font-weight: 500;
 font-size: .9rem;
 padding: .4rem .1rem;
 color: var(--c-text-dim);
 transition: color var(--t-base) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible {
 color: var(--c-text);
}
.nav__link::after {
 content: "";
 position: absolute;
 bottom: -.2rem;
 left: 0;
 width: 0%;
 height: 2px;
 background: var(--c-primary);
 border-radius: 999px;
 transition: width var(--t-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after {
 width: 100%;
}
.nav__link--active {
 color: var(--c-primary-glow);
}
.nav__link--active::after {
 width: 100%;
}
/* Toggle (mobile) */
.nav__toggle {
 display: none;
 flex-direction: column;
 gap: 3px;
 width: 2rem;
 height: 1.75rem;
 background: transparent;
 border: 0;
 cursor: pointer;
 padding: 0;
 position: relative;
 z-index: 100;
}
.nav__toggle:focus-visible {
 outline: 2px solid var(--c-primary);
 outline-offset: 2px;
 border-radius: var(--radius-sm);
}
.nav__toggle-bar {
 display: block;
 width: 100%;
 height: 3px;
 background: var(--c-text);
 border-radius: 999px;
 transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
/* ===== Hero ===== */
.hero {
 display: grid;
 grid-template-columns: 1fr;
 align-items: start;
 gap: var(--sp-xxl);
 padding-block: var(--sp-xxxl);
 min-height: calc(100vh - 4.5rem);
 position: relative;
 overflow: hidden;
}
.hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at 30% 20%, rgba(255,107,47,.08), transparent 55%), radial-gradient(circle at 80% 70%, rgba(255,213,79,.07), transparent 50%);
 z-index: -2;
}
.hero__content {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--sp-xl);
 max-width: 42rem;
 z-index: 1;
}
.hero__title {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);
 line-height: 1.2;
 letter-spacing: -0.015em;
 color: var(--c-text);
 margin-bottom: var(--sp-sm);
}
.hero__subtitle {
 font-size: clamp(1rem, 1.2vw + .7rem, 1.125rem);
 font-weight: 400;
 line-height: 1.6;
 color: var(--c-text-dim);
}
.hero__search {
 display: flex;
 align-items: center;
 gap: var(--sp-sm);
 margin-top: var(--sp-lg);
 max-width: 560px;
 margin-left: auto;
 margin-right: auto;
}
.hero__search .input-group {
 flex: 1;
}
.hero__search .btn--primary {
 flex-shrink: 0;
}
.hero__meta {
 display: inline-flex;
 align-items: center;
 gap: var(--sp-lg);
 margin-top: var(--sp-xl);
 flex-wrap: wrap;
}
.hero__badge,
.hero__count {
 display: inline-flex;
 align-items: center;
 gap: .35rem;
 font-size: .8rem;
 font-weight: 500;
}
.hero__badge {
 color: var(--c-accent-emphasis);
}
.hero__star {
 width: 1rem;
 height: 1rem;
 fill: var(--c-accent);
}
.hero__count strong {
 color: var(--c-primary-glow);
 font-weight: 700;
}
.hero__visual {
 position: relative;
 justify-self: center;
 width: min(100%, 32rem);
 aspect-ratio: 3/2;
 overflow: hidden;
 z-index: 1;
}
.hero__glow {
 position: absolute;
 inset: 0;
 border-radius: var(--radius-xl);
 background: var(--gradient-hero);
 filter: blur(50px);
 opacity: .6;
 z-index: -1;
}
.hero__img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-xl);
}


/* ===== Global Components ===== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .4rem;
 font-family: var(--font-sans);
 font-weight: 600;
 font-size: .95rem;
 line-height: 1.2;
 border: none;
 border-radius: var(--radius-md);
 padding: .7rem 1.25rem;
 text-decoration: none;
 transition: var(--transition-base), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
 white-space: nowrap;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.btn--primary {
 background: var(--gradient-primary);
 color: #fff;
 border: 1px solid var(--c-primary-700);
 box-shadow: var(--shadow-primary);
}
.btn--primary:hover {
 background: var(--gradient-primary-hover);
 box-shadow: var(--shadow-primary-hover);
 transform: translateY(-1px);
}
.btn--primary:focus-visible {
 outline: 2px solid var(--c-primary-glow);
 outline-offset: 2px;
}
.btn--secondary {
 background: var(--c-bg-panel);
 color: var(--c-text);
 border: 1px solid var(--c-border);
}
.btn--secondary:hover {
 background: var(--c-bg-panel-2);
 border-color: var(--c-border-strong);
}
.btn--ghost {
 background: transparent;
 color: var(--c-text-dim);
 border: 1px solid var(--
 border var(--c-border-hover);
}
.btn--ghost:hover {
 background: rgba(255,255,255,0.03);
 color: var(--c-text);
 border-color: var(--c-border-strong);
}
.btn--ghost:focus-visible {
 outline: 2px solid var(--c-primary);
 outline-offset: 2px;
}
.btn--icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .4rem;
}
.btn--icon > svg {
 width: 1.1rem;
 height: 1.1rem;
 flex-shrink: 0;
}
.input-group {
 display: flex;
 flex-direction: column;
 gap: .35rem;
}
.input-group label {
 font-size: .8rem;
 font-weight: 500;
 color: var(--c-text-dim);
}
.input-group input,
.input-group select,
.input-group textarea {
 padding: .65rem .8rem;
 font-family: var(--font-sans);
 font-size: .95rem;
 color: var(--c-text);
 background: var(--c-bg-panel);
 border: 1px solid var(--c-border);
 border-radius: var(--radius-md);
 outline: none;
 transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.input-group input::placeholder,
.input-group select::placeholder,
.input-group textarea::placeholder {
 color: var(--c-text-dim);
 opacity: .7;
}
.input-group input:focus-visible,
.input-group select:focus-visible,
.input-group textarea:focus-viewable {
 border-color: var(--c-primary);
 box-shadow: 0 0 0 2px rgba(255,107,47,.2);
}
.input-group input[type="number"] {
 direction: ltr;
 text-align: right;
}

/* ===== Calculator ===== */
.calculator {
 background: var(--c-bg-panel);
 border: 1px solid var(--c-border);
 border-radius: var(--radius-xl);
 padding: var(--sp-lg);
 box-shadow: var(--shadow-md);
}
.calculator__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--sp-md);
 margin-bottom: var(--sp-md);
}
.calculator__grid .input-group {
 flex: 1;
}
.calculator__result {
 display: flex;
 align-items: center;
 gap: var(--sp-sm);
 padding-top: var(--sp-md);
 border-top: 1px solid var(--c-border);
 font-size: 1rem;
}
.calculator__label {
 font-weight: 500;
 color: var(--c-text-dim);
}
.calculator__value {
 font-family: var(--font-mono);
 font-weight: 700;
 font-size: 1.1rem;
 color: var(--c-primary-glow);
 direction: ltr;
}
@media (max-width: 768px) {
 .calculator__grid {
 grid-template-columns: 1fr;
 }
}

/* ===== Features ===== */
.features__list {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--sp-xl);
}
.feature-item {
 background: var(--c-bg-panel);
 border: 1px solid var(--c-border);
 border-radius: var(--radius-xl);
 padding: var(--sp-lg);
 text-align: center;
 transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.feature-item:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-lg);
}
.feature-item__icon {
 width: 3rem;
 height: 3rem;
 margin: 0 auto var(--sp-sm);
 border-radius: var(--radius-full);
 background: rgba(255,107,47,.1);
 display: flex;
 align-items: center;
 justify-content: center;
}
.feature-item__icon svg {
 width: 1.5rem;
 height: 1.5rem;
 fill: var(--c-primary);
}
.feature-item__title {
 font-size: 1.1rem;
 font-weight: 700;
 margin-bottom: var(--sp-xs);
 color: var(--c-text);
}
.feature-item__desc {
 font-size: .9rem;
 color: var(--c-text-dim);
 line-height: 1.6;
}
@media (max-width: 768px) {
 .features__list {
 grid-template-columns: 1fr;
 }
}

/* ===== Comparison Tool ===== */
.comparison {
 background: var(--c-bg-panel);
 border: 1px solid var(--c-border);
 border-radius: var(--radius-xl);
 padding: var(--sp-lg);
 box-shadow: var(--shadow-md);
 overflow-x: auto;
}
.comparison__header {
 display: flex;
 justify-content: center;
 gap: var(--sp-sm);
 margin-bottom: var(--sp-xl);
 flex-wrap: wrap;
}
.comparison__slot {
 flex: 1;
 min-width: 140px;
 height: 90px;
 border: 2px dashed var(--c-border);
 border-radius: var(--radius-lg);
 background: rgba(255,255,255,.02);
 color: var(--c-text-dim);
 cursor: pointer;
 transition: all var(--t-base) var(--ease-out);
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 font-size: .85rem;
}
.comparison__slot:hover {
 border-color: var(--c-primary);
 background: rgba(255,107,47,.05);
 color: var(--c-text);
}
.comparison__slot--empty:hover {
 border-style: solid;
}
.comparison__table {
 width: 100%;
 border-collapse: collapse;
 min-width: 600px;
}
.comparison__table th,
.comparison__table td {
 padding: .7rem 1rem;
 text-align: center;
 border: 1px solid var(--c-border);
 font-size: .9rem;
}
.comparison__table th {
 background: rgba(255,107,47,.08);
 color: var(--c-text);
 font-weight: 600;
}
.comparison__table td {
 color: var(--c-text-dim);
}

/* ===== Footer ===== */
.footer {
 background: var(--c-bg-panel-2);
 border-top: 1px solid var(--c-border);
 padding: var(--sp-xxl) 0;
 margin-top: var(--sp-xxl);
}
.footer__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--sp-xl);
}
.footer__col h4 {
 font-size: 1rem;
 font-weight: 700;
 margin-bottom: var(--sp-sm);
 color: var(--c-text);
}
.footer__col ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: .5rem;
}
.footer__col a {
 color: var(--c-text-dim);
 text-decoration: none;
 font-size: .85rem;
 transition: color var(--t-base) var(--ease-out);
}
.footer__col a:hover,
.footer__col a:focus-visible {
 color: var(--c-primary-glow);
}
.footer__bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: var(--sp-xl);
 padding-top: var(--sp-lg);
 border-top: 1px solid var(--c-border);
 font-size: .8rem;
 color: var(--c-text-dim);
 flex-wrap: wrap;
 gap: var(--sp-sm);
}
.footer__brand {
 display: flex;
 align-items: center;
 gap: .5rem;
}
.footer__social {
 display: flex;
 gap: var(--sp-sm);
}
.footer__social a {
 display: inline-flex;
 width: 2rem;
 height: 2rem;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-full);
 background: var(--c-bg-panel);
 border: 1px solid var(--c-border);
 color: var(--c-text-dim);
 text-decoration: none;
 transition: all var(--t-base) var(--ease-out);
}
.footer__social a:hover,
.footer__social a:focus-visible {
 background: var(--c-primary);
 color: #fff;
 transform: translateY(-2px);
}
@media (max-width: 1024px) {
 .footer__grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 640px) {
 .footer__grid {
 grid-template-columns: 1fr;
 }
 .footer__bottom {
 flex-direction: column;
 text-align: center;
 }
}

/* ===== Scroll Reveal ===== */
.reveal {
 opacity: 0;
 transform: translateY(var(--reveal-offset, 24px));
 transition: opacity var(--t-slow) var(--ease-out, transform var(--t-slow) var(--ease-out);
}
.reveal.visible {
 opacity: 1;
 transform: none;
}
.reveal.delay-1 { transition-delay: 100ms; }
.reveal.delay-2 { transition-delay: 200ms; }
.reveal.delay-3 { transition-delay: 300ms; }

/* ===== Misc Utilities ===== */
.visually-hidden {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0,0,0,0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}
.text-center { text-align: center; }
.mt-sm { margin-top: var(--sp-sm); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mt-xl { margin-top: var(--sp-xl); }
.mb-xl { margin-bottom: var(--sp-xl); }
.is-loading {
 opacity: .6;
 pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}