@font-face {
  font-family: Vazirmatn;
  src: url('fonts/vazirmatn-arabic-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url('fonts/vazirmatn-arabic-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #142729;
  --muted: #52615d;
  --lime: #dcfc63;
  --paper: #f7f8f3;
  --line: #d9ded3;
  --dark: #142729;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.8 Vazirmatn, Tahoma, sans-serif; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid #32947a; outline-offset: 4px; }
.container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 5; inset-block-start: .5rem; inset-inline-start: .5rem; padding: .65rem 1rem; background: var(--lime); transform: translateY(-170%); }
.skip-link:focus { transform: none; }
.top { background: var(--dark); color: #f8faf2; border-bottom: 1px solid #ffffff23; }
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; flex: none; line-height: 1.05; }
.wordmark strong { display: block; font-size: 1.55rem; }
.wordmark small { display: block; font: 700 .58rem/1.6 system-ui, sans-serif; letter-spacing: .15em; margin-top: .22rem; }
.nav nav { display: flex; gap: clamp(1.2rem, 5vw, 3.75rem); font-size: .91rem; color: #dbe4dc; }
.nav nav a:hover, .footer a:hover { text-decoration: underline; text-underline-offset: .35em; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: .55rem 1.14rem; border-radius: 9px; font-weight: 700; white-space: nowrap; }
.button span[aria-hidden], .card-link span[aria-hidden] { font: 1.05em/1 system-ui, sans-serif; }
.top-button { min-height: 42px; color: var(--lime); border: 1px solid #b9cb7a69; font-size: .86rem; }
.primary { background: var(--lime); color: var(--dark); }
.primary:hover { background: #f0ffad; }
.secondary { border: 1px solid #9eb5ab75; color: #f5f7ed; }
.secondary:hover, .top-button:hover { background: #ffffff16; }
.hero { background: var(--dark); color: #f8faf2; }
.hero-inner { min-height: 525px; display: grid; grid-template-columns: .91fr 1fr; align-items: center; gap: clamp(32px, 6vw, 94px); padding-block: 58px 52px; }
.overline { color: #d7e5d3; display: flex; align-items: center; gap: .62rem; font-size: .89rem; font-weight: 700; margin-bottom: 16px; }
.overline span { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.hero h1 { font-size: clamp(2.8rem, 4.8vw, 4.5rem); line-height: 1.22; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero-description { color: #dae4dc; max-width: 460px; margin-top: 20px; line-height: 1.9; font-size: 1.03rem; }
.hero-actions { display: flex; gap: .66rem; flex-wrap: wrap; margin-top: 25px; }
.hero-note { margin-top: 19px; color: #b9cbc1; font-size: .83rem; }
.hero-note span { color: var(--lime); margin-inline-end: .3rem; }
.hero-figure { min-width: 0; }
.hero-art { position: relative; isolation: isolate; display: grid; aspect-ratio: 1.44; border: 1px solid #57736a; border-radius: 14px; background: radial-gradient(circle, #668479 1px, transparent 1.35px) 3px 3px / 19px 19px, #233e3c; overflow: hidden; }
.hero-art > img { position: absolute; height: auto; box-shadow: 0 13px 28px #0005; }
.hero-invoice { width: 36%; top: 8.5%; left: 14%; transform: rotate(-11deg); }
.hero-label { width: 57%; top: 34%; right: 6.5%; transform: rotate(8deg); }
.art-sticker { position: absolute; left: 9%; bottom: 10%; box-shadow: 0 5px 17px #0005; transform: rotate(-10deg); border-radius: 12px; }
.art-sticker img { width: clamp(27px, 4vw, 46px); height: auto; }
.registration { position: absolute; inset: 17px; width: 14px; height: 14px; color: #cff174; }
.top-right { inset-inline-end: auto; inset-block-end: auto; border-top: 1px solid; border-right: 1px solid; }
.bottom-left { inset-inline-start: auto; inset-block-start: auto; border-bottom: 1px solid; border-left: 1px solid; }
.hero-figure figcaption { display: flex; justify-content: space-between; color: #c1d0c5; font-size: .73rem; margin-top: 10px; }
.hero-figure figcaption bdi, .sheet-icon { font-family: ui-monospace, monospace; }
.tools { padding-block: 42px 32px; border-bottom: 1px solid var(--line); }
.tools h2 { font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.45; margin-bottom: 18px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.report-tool { --preview: #e6edfc; }
.contract-tool { --preview: #e2eee8; }
.minutes-tool { --preview: #e9eee0; }
.tools .card-art img { width: min(100%, 390px); max-height: none; aspect-ratio: 1.4; object-fit: cover; object-position: top; border-radius: 4px; }
.tools .card-body { padding-block: 17px 15px; }
.tools .card-link { padding-inline: 11px; border-radius: 7px; background: #edf4ea; }
.catalog { padding-block: 39px 75px; }
.catalog-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 1.25rem; flex-wrap: wrap; margin-bottom: 28px; }
.section-kicker { font-size: .85rem; color: #28614e; font-weight: 700; margin-bottom: .35rem; }
.catalog h2, .guide h2 { font-size: clamp(1.7rem, 3.3vw, 2.6rem); line-height: 1.36; }
.section-description { margin-top: .6rem; color: var(--muted); font-size: .93rem; }
.filters { display: flex; gap: .23rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: #fff; }
.filters button { border: 0; border-radius: 6px; min-height: 36px; padding: .25rem .74rem; background: transparent; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.filters button:hover { background: #ecf0e7; }
.filters [aria-pressed="true"] { color: #fff; background: var(--dark); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; overflow: clip; background: white; }
.card:focus-within { border-color: #32947a; }
.card-art { position: relative; min-height: 226px; display: grid; place-items: center; background: var(--preview); padding: 18px 26px; }
.card-art:focus-visible { outline-offset: -4px; }
.card-art img { max-width: 100%; width: auto; height: auto; max-height: 190px; box-shadow: 0 6px 16px #1427292e; transition: transform .18s ease; }
.card-art:hover img { transform: scale(1.035); }
.zoom { position: absolute; top: 12px; inset-inline-end: 12px; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 7px; background: #fffffff0; font: 1.2rem/1 system-ui, sans-serif; }
.retail { --preview: #e9eeff; }
.green { --preview: #dcebe0; }
.yellow { --preview: #f8e9aa; }
.courier { --preview: #deeff0; }
.repair { --preview: #f6e5ee; }
.optical { --preview: #faebd8; }
.music { --preview: #eee9dc; }
.card-body { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 17px 20px 13px; }
.card-meta { color: #4d6359; font-size: .78rem; }
.card-meta span { margin-inline: .2em; }
.card h3 { font-size: 1.25rem; margin-top: .18rem; }
.card p { color: var(--muted); font-size: .875rem; margin: .25rem 0 .8rem; }
.card-link { display: inline-flex; align-items: center; gap: .8rem; min-height: 40px; margin-top: auto; color: #215a49; font-size: .89rem; font-weight: 700; }
.card-link:hover { text-decoration: underline; text-underline-offset: .3em; }
.guide { display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: 32px; border-radius: 15px; background: #e9eee3; padding: 38px 44px; margin-bottom: 62px; }
.guide ol { margin: .85rem 0 0; padding-inline-start: 1.15rem; }
.guide li { margin-top: .35rem; }
.guide-download { background: var(--dark); color: white; border-radius: 11px; padding: 22px; }
.sheet-icon { color: var(--lime); font-weight: 700; font-size: .8rem; }
.guide-download p { color: #dce5dd; font-size: .89rem; margin: .2rem 0 .8rem; }
.guide-download .button { font-size: .88rem; }
.footer { border-top: 1px solid var(--line); min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: .82rem; }
.footer .wordmark { color: var(--ink); }
.footer .wordmark strong { font-size: 1.3rem; }
.lightbox { border: 0; padding: 16px 20px 20px; border-radius: 13px; background: var(--paper); color: var(--ink); width: min(640px, calc(100% - 28px)); max-height: 93dvh; }
.lightbox::backdrop { background: #0c1e1ed9; }
.lightbox-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.lightbox h2 { font-size: 1.2rem; }
.lightbox button { border: 1px solid var(--line); border-radius: 7px; width: 40px; height: 40px; background: white; color: var(--ink); font: 1.4rem/1 system-ui, sans-serif; }
.lightbox img { width: auto; height: auto; max-height: 66dvh; margin: 0 auto 16px; object-fit: contain; }
@media (max-width: 1050px) {
  .container { width: calc(100% - 64px); }
  .hero-inner { min-height: auto; gap: 32px; }
  .hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.25rem); }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 36px); }
  .hero-inner, .guide { grid-template-columns: 1fr; }
  .hero-inner { padding-block: 36px 27px; gap: 30px; }
  .hero h1 { font-size: clamp(2.68rem, 9vw, 4rem); }
  .hero-figure { width: min(100%, 540px); }
  .catalog { padding-block: 30px 42px; }
  .tool-grid { grid-template-columns: 1fr; gap: 12px; }
  .tools { padding-block: 30px 22px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-art { padding-inline: 13px; }
  .guide { padding: 24px; gap: 21px; margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .nav { min-height: 66px; gap: 8px; flex-wrap: wrap; padding-block: 12px 6px; }
  .nav .wordmark img { width: 38px; height: 38px; }
  .nav .wordmark strong { font-size: 1.35rem; }
  .nav nav { order: 2; justify-content: center; flex-wrap: wrap; width: 100%; gap: 0 clamp(9px, 3vw, 22px); font-size: .8rem; }
  .nav nav a { display: inline-flex; align-items: center; min-height: 38px; }
  .top-button { padding: .38rem .5rem; gap: .35rem; font-size: .74rem; }
  .hero-description { font-size: .94rem; }
  .button { font-size: .87rem; }
  .top-button { font-size: .74rem; }
  .cards, .tool-grid { grid-template-columns: 1fr; }
  .card-art { min-height: 218px; }
  .footer { flex-wrap: wrap; padding-block: 15px; }
  .footer p { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-art img { transition: none; }
}