@font-face{font-family:Vazirmatn;src:url('fonts/vazirmatn-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;}
@font-face{font-family:Vazirmatn;src:url('fonts/vazirmatn-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;}
@font-face{font-family:Vazirmatn;src:url('fonts/vazirmatn-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;}
@font-face{font-family:Vazirmatn;src:url('fonts/vazirmatn-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:Vazirmatn;src:url('fonts/vazirmatn-800.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap;}
:root { --navy:#0a2342; --navy-2:#102f54; --ink:#153251; --muted:#62758a; --line:#dce5ec; --paper:#f8fafb; --white:#fff; --mint:#00a884; --mint-pale:#e2f6f0; --orange:#ffbb5c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Vazirmatn", Tahoma, sans-serif; font-size:16px; line-height:1.9; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
.site-header { height:96px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 clamp(24px,6vw,104px); background:rgba(255,255,255,.98); border-bottom:1px solid #e4ebf0; position:relative; z-index:3; }
.brand { display:flex; gap:13px; align-items:center; white-space:nowrap; }
.brand img { width:66px; height:66px; object-fit:contain; }
.brand span { display:grid; gap:2px; line-height:1.2; }
.brand strong { color:var(--navy); font-size:22px; letter-spacing:0; font-weight:800; }
.brand small { color:#71889a; font-size:11px; font-weight:600; }
.main-nav { display:flex; align-items:center; gap:2px; padding:5px; background:#f1f5f7; font-size:13px; font-weight:650; color:#607487; }
.main-nav a { padding:8px 14px; transition:color .2s ease,background .2s ease,box-shadow .2s ease; }
.main-nav a:hover { color:var(--navy); }
.main-nav .is-active { color:var(--navy); background:white; box-shadow:0 2px 9px rgba(14,49,80,.1); }
.header-call { min-height:48px; display:flex; align-items:center; gap:10px; padding:7px 14px; color:white; background:var(--navy); font-size:13px; white-space:nowrap; transition:background .2s ease,transform .2s ease; }
.header-call:hover { background:#0e3157; transform:translateY(-1px); }.header-call svg { color:var(--mint); }.header-call span { display:grid; gap:1px; line-height:1.2; }.header-call small { color:#a9bece; font-size:9px; font-weight:500; }.header-call b { font-size:13px; letter-spacing:.2px; }
.mobile-menu { display:none; }
.hero { position:relative; isolation:isolate; overflow:hidden; background:var(--navy); color:white; min-height:640px; }
.hero-grid { position:absolute; inset:0; z-index:-1; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 85%,transparent 100%); }
.hero::after { content:""; position:absolute; width:55vw; aspect-ratio:1; left:-21vw; bottom:-44vw; border:1px solid rgba(0,168,132,.4); transform:rotate(45deg); }
.hero-inner { width:min(1240px,100%); min-height:558px; margin:auto; padding:76px clamp(24px,6vw,104px) 52px; display:grid; grid-template-columns:minmax(0,1.07fr) minmax(360px,.72fr); align-items:center; gap:72px; }
.hero-copy { position:relative; z-index:1; }
.kicker,.section-label { color:var(--mint); font-size:13px; font-weight:700; letter-spacing:0; margin:0 0 15px; display:flex; align-items:center; gap:7px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(42px,5vw,72px); line-height:1.27; letter-spacing:0; margin:0 0 22px; font-weight:800; }
h1 em { font-style:normal; color:var(--mint); }
.hero-description { max-width:570px; margin-bottom:30px; color:#c1d0df; font-size:17px; line-height:2; font-weight:400; }
.hero-actions { display:flex; align-items:center; gap:22px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:12px 22px; font-size:14px; font-weight:700; transition:transform .2s ease,background .2s ease; }
.button-primary { color:#052c2a; background:var(--mint); box-shadow:0 13px 28px rgba(0,168,132,.17); }
.button-primary:hover { background:#20be9c; transform:translateY(-2px); }
.text-action { display:inline-flex; align-items:center; gap:5px; color:#e6eff8; font-size:14px; font-weight:600; }
.text-action:hover { color:var(--mint); }
.product-visual { position:relative; width:100%; max-width:470px; justify-self:end; padding:12px; direction:ltr; border:1px solid rgba(197,219,239,.2); background:linear-gradient(140deg,rgba(34,70,109,.7),rgba(11,38,68,.93)); box-shadow:24px 30px 0 rgba(0,0,0,.1); }
.visual-topline { height:35px; padding:0 8px; display:flex; justify-content:space-between; align-items:center; color:#9fb6ca; border-bottom:1px solid rgba(255,255,255,.13); font-size:9px; letter-spacing:1.3px; }
.visual-topline i { width:38px; height:5px; background:var(--mint); }
.visual-body { padding:28px 22px 22px; }
.visual-title { display:grid; gap:3px; direction:rtl; text-align:right; }
.visual-title span { color:#9db2c7; font-size:11px; }.visual-title b { font-size:18px; font-weight:700; }
.visual-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:25px 0 14px; }.visual-stats div { position:relative; overflow:hidden; padding:11px; background:rgba(255,255,255,.07); }.visual-stats small { display:block; color:#a8bdcf; font-size:10px; }.visual-stats strong { display:block; margin-top:4px; font-size:25px; line-height:1.2; }.visual-stats strong span { font-size:12px; color:var(--mint); }.visual-stats i { position:absolute; bottom:0; right:0; left:0; height:2px; background:var(--mint); }
.visual-chart { position:relative; height:150px; padding:13px; overflow:hidden; background:rgba(0,0,0,.12); }.visual-chart>span { color:#a8bdcf; font-size:10px; }.chart-lines { position:absolute; inset:40px 14px 12px; display:grid; align-content:space-between; }.chart-lines i { border-top:1px dashed rgba(207,224,238,.15); }.visual-chart svg { position:absolute; right:10px; left:10px; bottom:8px; width:calc(100% - 20px); height:110px; overflow:visible; }.visual-chart path { position:relative; fill:none; stroke:var(--mint); stroke-width:2; }.visual-chart path.chart-fill { fill:rgba(0,168,132,.1); stroke:none; }
.visual-chip { position:absolute; display:flex; align-items:center; gap:6px; padding:7px 10px; color:var(--navy); background:white; font-size:10px; font-weight:800; box-shadow:0 12px 24px rgba(0,0,0,.18); direction:rtl; }.visual-chip svg { color:var(--mint); }.visual-chip-one { left:-30px; bottom:76px; }.visual-chip-two { right:-22px; top:89px; }
.hero-footer { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:17px clamp(24px,6vw,104px); border-top:1px solid rgba(255,255,255,.13); color:#9fb2c7; font-size:11px; letter-spacing:.4px; }.hero-footer span:nth-child(2) { text-align:center; }.hero-footer a { display:flex; justify-content:flex-end; align-items:center; gap:3px; color:white; font-weight:600; letter-spacing:0; }
.intro { padding:116px clamp(24px,6vw,104px) 48px; display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:end; background:white; }.section-label { margin-bottom:10px; }.section-intro h2,.method h2,.company h2,.contact h2 { margin:0; color:var(--navy); font-size:clamp(30px,3.2vw,47px); line-height:1.48; letter-spacing:0; font-weight:800; }.section-lead { margin:0 0 5px; max-width:420px; color:var(--muted); font-size:15px; line-height:2.05; }
.services { padding:0 clamp(24px,6vw,104px) 116px; display:grid; grid-template-columns:repeat(4,1fr); background:white; }.service { position:relative; min-height:330px; padding:29px 23px 27px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-left:1px solid var(--line); transition:background .22s ease,color .22s ease; }.service:first-child { border-right:1px solid var(--line); }.service:hover { color:white; background:var(--navy); border-color:var(--navy); }.service-head { display:flex; justify-content:space-between; align-items:center; color:var(--mint); }.service-head span { color:#a0b0bf; font-size:12px; font-weight:700; direction:ltr; }.service h3 { margin:57px 0 10px; color:var(--navy); font-size:20px; line-height:1.55; font-weight:800; transition:color .22s ease; }.service p { margin:0; color:var(--muted); font-size:13px; line-height:2; }.service>a { position:absolute; left:23px; bottom:25px; display:grid; width:34px; height:34px; place-items:center; color:var(--navy); border:1px solid var(--line); transition:background .22s ease,color .22s ease; }.service:hover h3 { color:white; }.service:hover p { color:#bdcfdf; }.service:hover>a { color:var(--navy); background:var(--mint); border-color:var(--mint); }
.method { padding:108px clamp(24px,6vw,104px); display:grid; grid-template-columns:.85fr 1.15fr; gap:94px; background:#eef4f5; }.method-heading>p:not(.section-label) { margin:21px 0 0; max-width:430px; color:var(--muted); font-size:15px; line-height:2.05; }.process-list { list-style:none; margin:0; padding:0; border-top:1px solid #cddbe2; }.process-list li { min-height:94px; display:grid; grid-template-columns:58px 1fr 25px; align-items:center; gap:12px; padding:17px 0; border-bottom:1px solid #cddbe2; }.process-list>li>span { color:var(--mint); font-size:12px; font-weight:800; direction:ltr; }.process-list h3 { margin:0; color:var(--navy); font-size:18px; line-height:1.6; }.process-list p { margin:1px 0 0; color:#6d7f90; font-size:12px; }.process-list>li>svg { color:#7790a3; }
.company { padding:100px clamp(24px,6vw,104px); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(52px,8vw,150px); align-items:center; background:var(--navy); color:white; }.company-mark { width:min(240px,100%); aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04); }.company-mark img { width:80%; mix-blend-mode:screen; filter:brightness(1.8) grayscale(1); }.company .section-label { color:var(--mint); }.company h2 { color:white; max-width:620px; font-size:clamp(28px,3vw,43px); }.company>div>p:not(.section-label) { max-width:680px; margin:20px 0 28px; color:#c0d0df; font-size:15px; line-height:2.15; }.company-meta { display:flex; flex-wrap:wrap; gap:13px 35px; padding-top:21px; border-top:1px solid rgba(255,255,255,.18); color:#b8c8d7; font-size:12px; }.company-meta span { display:flex; align-items:baseline; gap:8px; }.company-meta b { color:white; font-size:14px; }
.contact { padding:102px clamp(24px,6vw,104px); display:grid; grid-template-columns:.9fr 1.1fr; gap:75px; align-items:center; background:white; }.contact-links { border-top:1px solid var(--line); }.contact-links a { min-height:78px; display:grid; grid-template-columns:30px 1fr 24px; align-items:center; gap:13px; border-bottom:1px solid var(--line); color:var(--navy); transition:color .2s ease; }.contact-links a:hover { color:var(--mint); }.contact-links span { display:grid; line-height:1.35; }.contact-links small { color:#7990a4; font-size:11px; }.contact-links b { font-size:16px; font-weight:700; }.contact-links>a>svg:last-child { justify-self:end; }
footer { display:flex; justify-content:space-between; gap:25px; align-items:center; padding:22px clamp(24px,6vw,104px); background:#edf2f4; color:#63788a; font-size:11px; }footer address { display:flex; align-items:center; gap:7px; font-style:normal; } footer>span { white-space:nowrap; }
@media (max-width:900px) { .site-header { height:82px; padding:0 22px; }.brand img { width:55px; height:55px; }.brand strong { font-size:19px; }.main-nav { font-size:12px; }.main-nav a { padding:8px 10px; }.header-call { padding:7px 11px; }.hero-inner { grid-template-columns:1fr; gap:36px; min-height:auto; padding-top:65px; }.product-visual { justify-self:center; max-width:450px; }.hero-footer { grid-template-columns:1fr 1fr; }.hero-footer span:nth-child(2) { display:none; }.intro,.method,.company,.contact { grid-template-columns:1fr; gap:35px; }.intro { padding-top:78px; }.services { grid-template-columns:repeat(2,1fr); }.service:nth-child(3) { border-right:1px solid var(--line); }.service { min-height:280px; }.method { padding-top:78px; padding-bottom:78px; }.company { padding-top:76px; padding-bottom:76px; }.company-mark { width:170px; }.contact { padding-top:76px; padding-bottom:76px; } }
@media (max-width:580px) { body { font-size:15px; }.site-header { height:76px; padding:0 16px; gap:10px; }.brand { gap:10px; }.brand img { width:54px; height:54px; }.brand strong { font-size:19px; }.brand small { font-size:9px; }.main-nav,.header-call { display:none; }.mobile-menu { display:block; position:relative; }.mobile-menu summary { width:42px; height:42px; display:grid; place-items:center; color:var(--navy); list-style:none; border:1px solid #d9e5eb; background:#f4f8fa; cursor:pointer; }.mobile-menu summary::-webkit-details-marker { display:none; }.mobile-menu[open] summary { color:white; background:var(--navy); border-color:var(--navy); }.mobile-menu nav { position:absolute; left:0; top:51px; z-index:10; width:190px; padding:7px; background:white; border:1px solid #dae5eb; box-shadow:0 16px 32px rgba(9,37,67,.15); }.mobile-menu nav a { display:block; padding:10px 12px; color:var(--navy); font-size:13px; font-weight:700; }.mobile-menu nav a:hover { color:var(--mint); background:#f2f8f7; }.hero { min-height:0; }.hero-inner { padding:54px 22px 35px; gap:40px; }.hero-grid { background-size:35px 35px; }.kicker { font-size:11px; }.hero-description { font-size:14px; line-height:2.05; }.hero-actions { align-items:flex-start; flex-direction:column; gap:15px; }.button { width:100%; }.product-visual { width:calc(100% - 20px); }.visual-body { padding:20px 15px 16px; }.visual-chip-one { left:-14px; bottom:55px; }.visual-chip-two { right:-12px; top:68px; }.hero-footer { padding:14px 22px; font-size:9px; }.intro { padding:68px 22px 36px; }.section-intro h2,.method h2,.company h2,.contact h2 { font-size:29px; line-height:1.55; }.section-lead { font-size:13px; }.services { padding:0 22px 68px; grid-template-columns:1fr; }.service,.service:first-child,.service:nth-child(3) { border-right:1px solid var(--line); }.service { min-height:250px; }.service h3 { margin-top:42px; }.method { padding:66px 22px; }.process-list li { grid-template-columns:42px 1fr 18px; }.company { padding:65px 22px; }.company>div>p:not(.section-label) { font-size:13px; }.contact { padding:65px 22px; }.contact-links b { font-size:14px; } footer { align-items:flex-start; flex-direction:column; padding:18px 22px; font-size:10px; line-height:1.9; } }