@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f3efe5;
  --paper-light: #fbfaf6;
  --ink: #151815;
  --muted: #62675f;
  --line: rgba(21, 24, 21, .15);
  --earth: #b44d2d;
  --earth-dark: #75311f;
  --leaf: #315f4d;
  --sun: #e9b744;
  --night: #172923;
  --max: 1200px;
  --shadow: 0 28px 60px -42px rgba(42, 33, 23, .48), 0 12px 24px -20px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: "Vazirmatn", Tahoma, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; }
::selection { color: #fff; background: var(--earth); }
.skip-link { position: fixed; top: 8px; right: 8px; z-index: 30; padding: 10px 14px; color: #fff; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.grain { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

.site-header, main, footer { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 25; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-inline: 20px; background: rgba(243, 239, 229, .9); border: 1px solid transparent; border-bottom-color: var(--line); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 12px 30px -28px rgba(21,24,21,.8); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark > span:last-child { display: grid; gap: 2px; }
.wordmark b { font-size: 15px; font-weight: 800; }
.wordmark small { color: var(--muted); font: 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.wordmark-mark { width: 27px; height: 27px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 2px; transform: rotate(180deg); }
.wordmark-mark i { display: block; background: var(--ink); }
.wordmark-mark i:nth-child(1) { height: 9px; }.wordmark-mark i:nth-child(2) { height: 18px; }.wordmark-mark i:nth-child(3) { height: 26px; }
nav { display: flex; align-items: center; gap: 22px; font-size: 12px; font-weight: 600; }
nav a { text-decoration: none; transition: color .2s ease; }
nav a:hover { color: var(--earth); }
.nav-cta { padding: 11px 16px; color: #fff; background: var(--ink); }
nav .nav-cta:hover { color: #fff; background: var(--earth); }
[hidden] { display: none !important; }

.hero { min-height: 680px; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr); align-items: center; gap: clamp(50px, 8vw, 120px); padding: clamp(76px, 10vw, 132px) 0; }
.hero-copy { max-width: 620px; }
.eyebrow, .kicker { margin: 0 0 24px; color: var(--earth); font: 700 11px/1.8 "Vazirmatn", Tahoma, sans-serif; letter-spacing: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 28px; height: 1px; background: var(--earth); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; font-family: "Vazirmatn", Tahoma, sans-serif; font-size: clamp(66px, 8.4vw, 120px); font-weight: 850; line-height: .92; letter-spacing: -.065em; }
h1 em { color: var(--earth); font-style: italic; }
.slogan { margin: 28px 0 0; font-size: clamp(21px, 2.2vw, 31px); font-weight: 750; }
.intro { max-width: 55ch; margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 22px; border: 0; border-radius: 2px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.button-primary { color: #fff; background: var(--earth); box-shadow: var(--shadow); }
.button-primary:hover { background: var(--earth-dark); transform: translateY(-2px); }
.text-link { padding: 12px 0; font-size: 13px; text-underline-offset: 5px; }

.model-map { position: relative; min-height: 480px; overflow: hidden; color: #f4efe4; background: var(--night); box-shadow: var(--shadow); }
.model-map::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 42px 42px; }
.model-map::after { content: ""; position: absolute; left: -15%; bottom: -40%; width: 130%; height: 70%; border-radius: 50% 50% 0 0; background: #244637; }
.map-head, .map-foot { position: absolute; z-index: 3; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.58); font: 9px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.map-head { top: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.15); direction: ltr; }
.map-head i { color: #f0cf76; font-style: normal; }
.map-foot { bottom: 20px; direction: rtl; }
.map-core { position: absolute; z-index: 4; top: 50%; left: 50%; width: 156px; height: 156px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: var(--earth); box-shadow: 0 0 0 12px rgba(180,77,45,.16), 0 22px 50px rgba(0,0,0,.25); transform: translate(-50%, -50%); }
.map-core span, .map-core small { font-size: 10px; }.map-core strong { font: italic 54px/.95 Georgia, serif; }.map-core small { margin-top: 8px; opacity: .7; }
.route { position: absolute; z-index: 3; min-width: 120px; display: grid; gap: 3px; }
.route b { font-size: 13px; direction: ltr; text-align: left; }.route span { color: rgba(255,255,255,.55); font-size: 10px; }.route i { position: absolute; height: 1px; background: rgba(240,207,118,.6); transform-origin: right; }
.route-one { top: 105px; left: 32px; }.route-one i { top: 36px; right: -95px; width: 105px; transform: rotate(20deg); }
.route-two { top: 106px; right: 16px; }.route-two i { top: 38px; left: -86px; width: 98px; transform: rotate(-22deg); }
.route-three { bottom: 106px; left: 32px; }.route-three i { top: 0; right: -92px; width: 102px; transform: rotate(-18deg); }
.route-four { bottom: 104px; right: 16px; }.route-four i { top: 0; left: -82px; width: 94px; transform: rotate(20deg); }

.promise-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise-strip p { min-height: 132px; display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 18px; margin: 0; padding: 24px 7%; border-left: 1px solid var(--line); }
.promise-strip p:last-child { border-left: 0; }.promise-strip span { grid-row: 1 / 3; color: var(--earth); font: 11px ui-monospace, monospace; }.promise-strip strong { font-size: 15px; }.promise-strip small { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }

.section { padding: clamp(90px, 12vw, 150px) 0; border-bottom: 1px solid var(--line); }
.about { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(60px, 10vw, 150px); }
.section-heading h2, .calculator-intro h2, .closing h2 { margin: 0; font-size: clamp(34px, 4.5vw, 58px); font-weight: 750; line-height: 1.45; letter-spacing: -.035em; }
.about-copy { padding-top: 44px; }.about-copy p, .calculator-intro > p { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 2.05; }

.tooling { padding-top: clamp(80px, 10vw, 125px); }
.tooling-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; margin-top: 64px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.tool-card { min-height: 250px; display: flex; flex-direction: column; padding: 26px 24px 22px; border-left: 1px solid var(--line); }
.tool-card:last-child { border-left: 0; }
.tool-card.featured { color: #f7f2e8; background: var(--night); border-color: var(--night); }
.tool-card > span { color: var(--earth); font: 10px ui-monospace, Consolas, monospace; }
.tool-card.featured > span { color: #f0cf76; }
.tool-card h3 { margin: 42px 0 12px; direction: ltr; font-size: 24px; font-weight: 750; text-align: right; }
.tool-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 2; }
.tool-card.featured p { color: rgba(255,255,255,.62); }
.tool-card small { margin-top: auto; padding-top: 28px; color: var(--muted); font: 9px ui-monospace, Consolas, monospace; letter-spacing: .08em; direction: ltr; text-align: left; }
.tool-card.featured small { color: rgba(255,255,255,.4); }
.more-models { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.more-models span { flex: 0 0 auto; padding: 5px 9px; color: var(--earth); border: 1px solid rgba(180,77,45,.35); }
.more-models strong { flex: 0 0 auto; color: var(--ink); }

.calculator-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.calculator-intro { position: sticky; top: 104px; }.calculator-intro h2 { margin-bottom: 24px; }
.pending-note { display: flex; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.9; }.pending-note i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 5px rgba(233,183,68,.18); }.pending-note b { display: block; color: var(--ink); }
.calculator-card { padding: clamp(26px, 4vw, 48px); background: var(--paper-light); border: 1px solid rgba(21,24,21,.1); box-shadow: var(--shadow); }
.calculator-field { margin: 0 0 40px; padding: 0; border: 0; }.calculator-field > label, .calculator-field legend { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 700; }
.amount-input { display: flex; align-items: center; border-bottom: 2px solid var(--ink); }.amount-input span { color: var(--earth); font: 38px Georgia, serif; }.amount-input input { min-width: 0; width: 100%; padding: 8px 12px; border: 0; outline: 0; color: var(--ink); background: transparent; font: 52px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.range { width: 100%; height: 3px; margin: 28px 0 0; accent-color: var(--earth); cursor: pointer; }.range-labels { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font: 10px ui-monospace, monospace; }
.duration-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.duration-options label { cursor: pointer; }.duration-options input { position: absolute; opacity: 0; }.duration-options span { min-height: 82px; display: grid; align-content: center; gap: 7px; padding: 14px 18px; border: 1px solid var(--line); transition: border .2s, background .2s; }.duration-options input:checked + span { border-color: var(--earth); background: rgba(180,77,45,.06); box-shadow: inset 0 -3px var(--earth); }.duration-options input:focus-visible + span { outline: 2px solid var(--earth); outline-offset: 3px; }.duration-options b { font-size: 14px; }.duration-options small { color: var(--muted); font-size: 10px; }
.estimate { margin: 8px 0 24px; padding: 6px 22px; color: #fff; background: var(--night); }.estimate div { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }.estimate div:last-child { border: 0; }.estimate span { color: rgba(255,255,255,.62); font-size: 11px; }.estimate strong { font-size: 13px; font-variant-numeric: tabular-nums; }.estimate .pending-price { color: #f0cf76; font-weight: 400; }
.button-disabled { width: 100%; color: #777b74; background: #e5e2d9; cursor: not-allowed; }

.steps .compact { display: flex; justify-content: space-between; align-items: end; gap: 30px; }.steps .compact .kicker { flex: 0 0 auto; }.steps .compact h2 { max-width: 650px; }
.steps ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 70px 0 0; padding: 0; border-top: 1px solid var(--ink); }.steps li { display: flex; gap: 22px; padding: 30px 26px 10px 0; border-left: 1px solid var(--line); }.steps li:last-child { border-left: 0; }.steps li > span { color: var(--earth); font: 12px ui-monospace, monospace; }.steps h3 { margin: 0 0 14px; font-size: 15px; }.steps li p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }

.closing { margin-top: 0; padding: clamp(70px, 10vw, 120px) clamp(30px, 8vw, 110px); color: #f7f2e8; background: var(--night); }.closing .kicker { color: #f0cf76; }.closing h2 { max-width: 780px; }.closing > p:not(.kicker) { max-width: 620px; margin: 24px 0 40px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 2; }.status { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; }.status i { width: 8px; height: 8px; border-radius: 50%; background: #f0cf76; box-shadow: 0 0 0 5px rgba(240,207,118,.13); }
footer { min-height: 150px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; color: var(--muted); font-size: 10px; }footer > p:nth-child(2) { text-align: center; }footer > p:last-child { text-align: right; }.footer-mark { color: var(--ink); }

@media (max-width: 900px) {
  .site-header, main, footer { width: min(calc(100% - 32px), var(--max)); }
  nav > a:not(.nav-cta):not(.nav-login) { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; }.hero-copy { max-width: 680px; }.model-map { min-height: 430px; }
  .about, .calculator-section { grid-template-columns: 1fr; }.calculator-intro { position: static; max-width: 650px; }
  .tooling-grid { grid-template-columns: 1fr 1fr; }.tool-card:nth-child(2) { border-left: 0; }.tool-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .site-header { width: 100%; min-height: 68px; padding-inline: 16px; border-inline: 0; }.nav-cta { padding: 10px 12px; font-size: 10px; }.wordmark small { display: none; }
  .hero { gap: 58px; padding: 68px 0 80px; }h1 { font-size: clamp(64px, 20vw, 92px); }.intro { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .model-map { min-height: 410px; }.route { min-width: 90px; }.route b { font-size: 11px; }.map-core { width: 130px; height: 130px; }.map-core strong { font-size: 45px; }.route-one,.route-three { left: 18px; }.route-two,.route-four { right: 8px; }.route-one i,.route-three i { right: -55px; width: 64px; }.route-two i,.route-four i { left: -48px; width: 58px; }
  .promise-strip { grid-template-columns: 1fr; }.promise-strip p { min-height: 100px; border-left: 0; border-bottom: 1px solid var(--line); }.promise-strip p:last-child { border-bottom: 0; }
  .section { padding: 80px 0; }.about-copy { padding-top: 0; }.calculator-card { padding: 25px 18px; }.duration-options { grid-template-columns: 1fr; }.estimate { padding-inline: 16px; }.estimate div { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; }
  .tooling-grid { grid-template-columns: 1fr; margin-top: 42px; }.tool-card { min-height: 210px; border-left: 0; border-bottom: 1px solid var(--line); }.tool-card:nth-child(3) { border-bottom: 1px solid var(--line); }.more-models { align-items: flex-start; flex-wrap: wrap; }.more-models strong { flex-basis: calc(100% - 60px); }
  .steps .compact { display: block; }.steps ol { grid-template-columns: 1fr; margin-top: 45px; }.steps li { min-height: 116px; border-left: 0; border-bottom: 1px solid var(--line); }.steps li:last-child { border: 0; }
  .closing { margin-inline: -16px; }.closing h2 { font-size: 35px; }
  footer { min-height: 200px; grid-template-columns: 1fr 1fr; }.footer-mark { display: none; }footer > p:nth-child(2) { text-align: right; }footer > p:last-child { text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: appear .7s ease-out both; }.hero-copy h1 { animation-delay: .06s; }.hero-copy .slogan { animation-delay: .12s; }.hero-copy .intro,.hero-copy .hero-actions { animation-delay: .18s; }.model-map { animation: appear .9s .15s ease-out both; }.map-core { animation: pulse 4s ease-in-out infinite; }
}
@keyframes appear { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 12px rgba(180,77,45,.16), 0 22px 50px rgba(0,0,0,.25); } 50% { box-shadow: 0 0 0 20px rgba(180,77,45,.06), 0 22px 50px rgba(0,0,0,.25); } }